A box has four layers
Content sits in the center, padding creates breathing room inside the border, the border outlines the box, and margin creates space outside it. Backgrounds extend through padding but not through margin.
Box sizing changes width math
With border-box sizing, a declared width includes padding and borders. This usually matches how designers think about a component's final size and prevents padding from unexpectedly making a fixed-width box wider.
A familiar example
Sizing a card
- Give the card a maximum width instead of forcing one size everywhere.
- Use padding for space between the border and card content.
- Use the surrounding layout gap, not random child margins, to separate cards.
What to remember
- Padding is inside; margin is outside.
- Border-box makes declared dimensions easier to reason about.
- Let the layout own spacing between related items when possible.