What’s the difference between margin, border, padding, and content?

0-2 years experience

1. 1You need to build a card component that has a 10px space between the text and the border, and a 5px solid border. Which CSS properties would you set for margin, padding, and border to achieve that layout?
2. 2If you apply padding:20px to a div and then give it margin:10px, what will be the distance between this div and the element next to it?
3. 3Assuming the default box-sizing:content-box, what will be the total rendered width of a box that has width:200px, padding:15px, and a 2px border?

2-5 years experience

1. 1A modal dialog is spilling over its container by a few pixels after you added padding to the inner content. Walk me through how you'd debug whether the overflow is caused by padding, margin collapse, or the border.
2. 2Your button looks visually larger because of a 3px border, but the clickable area is still the original size. How would you adjust the CSS so the interactive region matches the visual size without redesigning the button?
3. 3When you changed a list of items from display:inline-block to flex, the spacing between items changed unexpectedly. Explain how margin, border, and padding behave in a flex container and what you would tweak to keep the original spacing.

5-8 years experience

1. 1Our design system defines spacing tokens for margin and padding. How would you structure the CSS (or CSS‑in‑JS) so that every component consistently follows the box model while still allowing per‑component border overrides?
2. 2Adding a 1px border to thousands of server‑rendered cards caused a noticeable layout shift and extra paint time. Discuss strategies to mitigate reflow and paint costs related to box‑model changes at this scale.
3. 3A third‑party widget injects its own padding, causing its content to overflow the surrounding layout. How would you isolate or contain that widget using CSS cascade and specificity so the rest of the page remains unaffected?

8+ years experience

1. 1We are migrating a legacy codebase that uses box-sizing:content-box everywhere to a new design system that prefers border-box. What risks do you anticipate and what steps would you take to transition globally without breaking existing margin and padding calculations?
2. 2Our product needs a unified design language across a web app (CSS) and a native mobile app (e.g., SwiftUI). How would you abstract margin, border, and padding so they can be expressed consistently across both platforms while respecting each platform's rendering model?
3. 3A cross‑team initiative wants to expose spacing as design tokens in a JSON file consumed by multiple front‑ends. Explain how you’d map those tokens to the CSS box model, maintain backward compatibility, and avoid layout regressions during rollout.