Architecture Walkthrough

Inside the Border Versus Outside It

Padding is space inside the element, between its content and its border. Margin is space outside the element, between its border and its neighbours. That single positional fact drives every other difference between them.

Because padding is inside the border, it is part of the element. It receives the background colour and background image, it is inside the region that responds to clicks and hover, and under border-box it is included in the declared width and height. Because margin is outside the border, it is not part of the element. It never receives the background, it does not respond to pointer events, and it is excluded from width and height under both box-sizing modes.

Three Behavioural Divergences

Beyond position, the two properties differ in three ways worth stating explicitly.

Collapsing. Adjacent vertical margins collapse into a single margin equal to the larger of the two. Two stacked paragraphs with margin-bottom: 20px and margin-top: 30px end up 30px apart, not 50px. Padding never collapses; it always adds.

Negative values. Margin accepts negative values, which pull an element toward or over its neighbour and are the mechanism behind classic overlap tricks and full-bleed layouts. Padding is clamped to zero and above; a negative padding value is simply invalid and dropped.

Percentage resolution. Both resolve percentages against the containing block's inline size, including the vertical ones. padding-top: 50% therefore produces a box whose top padding is half the parent's width, which is the basis of the classic aspect-ratio hack that aspect-ratio has now largely replaced.

Choosing Between Them

The reliable question is: does this space belong to the element or between elements?

If the space must be clickable, hoverable, or coloured, it belongs to the element and you want padding. A button's tap target grows with padding; margin adds visual room around the button while leaving that room unclickable, which is an accessibility defect on touch devices where the WCAG target guidance is 44 by 44 CSS pixels.

If the space must separate two elements without inheriting either one's appearance, it belongs between them and you want margin. Two cards with backgrounds separated by padding would show that background stretched across the gap; margin leaves the gap transparent so the page background shows through.

And when the space is uniform separation between siblings in a flex or grid container, use gap on the parent instead of either. gap applies only between items, never before the first or after the last, so it removes the :last-child { margin-bottom: 0 } override that hand-rolled margin spacing always needs. It also does not collapse, which makes it more predictable than vertical margin.

Key Code Explained

/* Padding: space belongs to the element, so it is clickable and coloured */
.nav-link {
  display: inline-block;
  padding: 12px 16px; /* grows the actual hit area to ~44px tall */
  background: #1e293b; /* paints across the padding */
}

/* Margin: WRONG for a hit area — the space is dead */
.nav-link-broken {
  display: inline-block;
  margin: 12px 16px; /* looks the same, but the 12px is not clickable */
  background: #1e293b; /* background stops at the border, margin stays clear */
}

/* Margin: space belongs BETWEEN elements, stays transparent */
.card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 24px; /* page background shows through the gap */
}

/* Padding here would paint the card background across the gap
   and merge the two cards into one visual block */

/* Vertical margins collapse; padding never does */
.para-a {
  margin-bottom: 20px;
}
.para-b {
  margin-top: 30px;
}
/* Gap between them is 30px, not 50px */

/* Only margin accepts negatives — full-bleed inside a padded container */
.full-bleed {
  margin-inline: -24px; /* escapes the parent's 24px padding */
}

/* gap replaces sibling margin and needs no last-child override */
.stack {
  display: flex;
  flex-direction: column;
  gap: 24px; /* applied only between children */
}

The .nav-link versus .nav-link-broken pair is the most instructive comparison here. Both render at the same visual size and look identical in a screenshot, but only one of them is actually 44px of tappable target. On a phone, the margin version drops taps near the top and bottom edges of the link, which reads to users as an unresponsive interface rather than a CSS bug.

The .full-bleed rule shows the capability gap. Escaping a parent's padding requires a negative value, and since padding cannot be negative, margin is the only tool that can do it.

Tradeoffs

What Interviewers Actually Check

• Whether you can place both properties correctly in the box model relative to the border
• Whether you know which one collapses, which accepts negatives, and which receives the background
• Whether you connect padding to hit-target size rather than treating it as purely visual
• Whether you can name a concrete layout that breaks if the two are swapped
• Whether you know gap exists and when it is the better answer than either property

Follow-Up Questions

1. Why do padding-top and padding-bottom percentages resolve against the container's width rather than its height?
2. How do the logical properties padding-inline, margin-block, and friends change behaviour in a right-to-left or vertical writing mode?
3. What is the margin-trim property intended to solve, and how does it compare to the :last-child override pattern?
4. Does gap collapse with adjacent margins on flex items, or do they add together?
5. In a design system, would you expose spacing as padding on components or as gap on layout primitives, and why?

Common Candidate Mistakes

• Using margin to make a button or nav link visually larger, producing an element that looks tappable but drops taps in the margin ring
• Separating two background-coloured cards with padding, which stretches each card's background across the intended gap and visually merges them
• Expecting padding to collapse between stacked elements the way adjacent vertical margins do, then being surprised the spacing doubled
• Writing a negative padding value to pull content past its parent's edge, when only negative margin can do that
• Hand-rolling sibling spacing with margin-bottom on every child plus a :last-child reset, when gap on the flex or grid parent gives the same result with no override and no collapsing

Interview Readiness Checklist

Before you leave this question, make sure you can answer:

• Can you place both properties in the box model and say which one sits inside the border?
• Can you list three behavioural differences beyond position?
• Can you explain why margin is the wrong tool for enlarging a button's hit area?
• Can you explain why padding is the wrong tool for separating two coloured cards?
• Can you say when gap replaces both, and what overrides it eliminates?

Summary

Padding is space inside the element, between content and border. Margin is space outside the element, between border and neighbours. Because padding is part of the element, it receives the background, participates in the hit area, and counts toward width under border-box. Because margin is not part of the element, it stays transparent, ignores pointer events, and is excluded from width under both modes.

They also diverge behaviourally. Adjacent vertical margins collapse to the larger of the two, while padding always adds. Margin accepts negative values and can pull an element over its neighbour or escape a parent's padding; padding is clamped at zero. Both resolve percentages against the containing block's inline size, which is why padding-top: 50% once served as an aspect-ratio hack.

The choice comes down to whether the space belongs to the element or between elements. Space that must be clickable or coloured is padding, which is why hit targets grow with padding and never with margin. Space that must separate siblings without inheriting their appearance is margin. And when the space is uniform separation between flex or grid siblings, gap on the parent beats both: it applies only between items, never collapses, and needs no last-child override.