Margin and padding both create space around elements, but they serve different purposes. Padding adds space inside the element, between the content and the border, while margin adds space outside the element, separating it from other elements.

Example: Margin vs Padding

Key Differences

1
Padding increases space between content and border inside the element.
2
Margin increases space between the element and other elements outside.
3
Padding affects the total size of the element (unless using box-sizing: border-box).
4
Margin does not affect the element's internal size; it only creates separation outside.

Difficulty: 2/10

Topics: box model, layout, spacing

Scenario Questions

0-2 years experience

1
You need to add space between a button and the text above it without changing the button's background size. Would you use margin or padding, and why?
2
If you set padding: 20px on a div, how does that affect its total width compared to setting margin: 20px?
3
A design mockup shows a 10px gap inside a card component. How would you implement that in CSS?

2-5 years experience

1
Your team notices that a modal dialog's background color is leaking into the surrounding page when you add spacing. Walk me through how you would debug whether margin or padding is the cause.
2
You refactor a component to use a shared utility class for spacing, but the layout breaks on some pages. Explain how margin collapse could be causing the issue and how you'd fix it.
3
When converting a pixel‑based design to a responsive layout, you need consistent outer spacing between cards. Would you choose margin or padding, and what trade‑offs would you consider?

5-8 years experience

1
We're building a design system component library. How would you decide when to expose margin vs padding props on a component, and what impact does that have on composition and theming?
2
A high‑traffic e‑commerce site experiences layout jank when many product cards are rendered. Discuss how excessive margin calculations versus padding could affect rendering performance and reflow.
3
Explain how you would handle a situation where a component needs both internal spacing and external spacing, but the CSS framework only provides one type of spacing utility.

8+ years experience

1
Our legacy codebase mixes margin and padding inconsistently across hundreds of pages. Propose a migration strategy to standardize spacing while minimizing risk and regression.
2
When designing a cross‑team UI framework, how would you enforce a consistent approach to margin and padding to avoid layout bugs, and what tooling or linting would you put in place?
3
Consider a scenario where a component must be used in both web and native (React Native) environments. How would differences in margin/padding handling affect your design decisions?

Follow-up Questions

❓What happens when both margin and padding are applied to the same element?
❓Can you describe margin collapse and whether padding participates?
❓How does using margin versus padding change the way background colors are rendered?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model