The box model defines how width/height combine with padding, border, and margin in final layout calculations.
Debug this snippet
.card {\n width: 320px;\n padding: 24px;\n border: 4px solid #334155;\n}If parent width is 320px, this overflows with default content-box. Add box-sizing: border-box to keep size predictable.
Production checklist
- Set global
border-box. - Inspect computed box size in DevTools.
- Test with long text and small screens.
Important interview questions and answers
- Q: What does
content-boxmean?
A: Declared width/height apply to content only; padding/border add extra size. - Q: Why do teams default to
border-box?
A: Easier mental model and fewer overflow surprises. - Q: Where do you verify real dimensions?
A: DevTools computed/box model panel.
Challenge
Box model inspect
- Set
box-sizing: border-boxon a card. - Change padding and watch total width stay stable.
Done when: width includes padding when border-box is set.