Every element the browser renders is a rectangular box. The box model describes the four layers that make up that box, from the inside out.

The four layers

┌─────────────── margin ───────────────┐
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │
│  │  │      content (w × h)     │  │  │
│  │  └──────────────────────────┘  │  │
│  └────────────────────────────────┘  │
└───────────────────────────────────────┘

• Content — the actual text/image; sized by width/height.
• Padding — space inside the border, around the content. Background shows here.
• Border — the line around the padding.
• Margin — transparent space outside the border, separating it from neighbors.

box-sizing — the part interviews actually care about

content-box (the default): width/height size only the content. Padding and border are added on top.

.box { width: 200px; padding: 20px; border: 5px solid; }
/* rendered width = 200 + 20*2 + 5*2 = 250px  ← surprising */

border-box: width/height include padding and border. The content shrinks to fit.

.box { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid; }
/* rendered width = exactly 200px  ← predictable */

This is why nearly every CSS reset does:

*, *::before, *::after { box-sizing: border-box; }

Margin collapsing

Adjacent vertical margins collapse to the larger of the two (not the sum). Two stacked elements with margin: 20px and margin: 30px end up 30px apart, not 50px. Horizontal margins never collapse. Flex/grid items don't collapse either.

Senior framing

The senior signal is knowing why border-box is the standard (it makes layout math predictable — width means width), that margin collapsing is a real, intentional behavior that surprises people, and that flex/grid contexts opt out of collapsing. Bonus: outline and box-shadow are not part of the box model — they don't affect layout.