The Complete Box Model

Content → padding → border → margin

1. Read boxes from the inside out

  1. Content holds text, images, or child elements.
  2. Padding creates space inside the border.
  3. The border surrounds the content and padding.
  4. Margin creates transparent space outside the border.
Margin area
Border area
Padding area

Content area

Each layer surrounds the previous one.

2. Compare sizing modes

Both boxes declare width: 280px, padding: 20px, and border: 4px.

content-box

Visible width: 328px

280 content + 40 padding + 8 border

border-box

Visible width: 280px

Content shrinks so padding and border fit inside 280px.

Key rule

Margin is outside both sizing modes.

Using border-box simplifies calculations, but it does not include margin.

Important CSS

Border-box includes padding and border inside width.

.border-box-demo {
  box-sizing: border-box;
  width: 280px;
  padding: 20px;
  border: 4px solid #87998a;
}