Explain the CSS box model. What does box-sizing: border-box change?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Every element is a box: content → padding → border → margin. Default content-box makes width apply only to content, so padding/border grow the element beyond it. border-box includes padding and border in width — the modern standard.
Detailed explanation
The box model defines how dimensions compute: total size equals content + padding + border (+ margin affects spacing outside). Under content-box (the CSS default), declaring width: 300px with padding: 20px yields a 340px element — arithmetic surprises that made layouts brittle for years. box-sizing: border-box redefines width/height as the *final* rendered size including padding and border, so boxes behave intuitively: set 300px, get 300px. Margin always stays outside either way (and collapses vertically between siblings — worth mentioning as bonus). Nearly every reset applies border-box globally: *, *::before, *::after { box-sizing: border-box }. Interview follow-ups often probe margin collapsing rules or how percentages resolve against containing blocks — know that width percentages reference the parent's content width.
Example
*, *::before, *::after {
box-sizing: border-box;
}
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
}
/* border-box: renders exactly 300px wide
content-box: would render 350px */Interview tip
Do the math out loud — 300 + 2×20 + 2×5 = 350 under content-box — then state border-box as the universal fix and mention global reset adoption.
Common mistakes
- Forgetting margins stay outside both models.
- Not knowing margin collapsing between vertical siblings.