The CSS Box Model: Content, Padding, Border and Margin

Every element on a page is a rectangular box. The box model describes the four layers that make up each box, from the inside out:

1. Content: the text, image or child elements.
2. Padding: space between the content and the border, inside the box. It takes the element's background.
3. Border: a line around the padding.
4. Margin: space outside the border that separates the box from its neighbours. It is always transparent.

┌──────────────── margin ────────────────┐
│ ┌────────────── border ──────────────┐ │
│ │ ┌──────────── padding ───────────┐ │ │
│ │ │            content             │ │ │
│ │ └────────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
└────────────────────────────────────────┘

Seeing the layers#

.outer {
  background: #fde7c8;   /* shows the margin area of .box */
  padding: 1px;          /* stops the child's margin escaping */
}
.box {
  margin: 24px;
  border: 6px solid #8a3b12;
  padding: 20px;
  background: #fff3c4;
}

<div class="outer">
  <div class="box">Content area</div>
</div>

• The peach area around the box is its 24px margin (made visible by the parent's background).
• The dark brown line is the 6px border.
• The yellow area between the border and the text is the 20px padding: it has the box's background colour.
• The text sits in the content area.

How big is the box?#

By default (box-sizing: content-box), width and height set the size of the content area only. Padding and border are added on top:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Visible width = 200 + 20 + 20 + 5 + 5 = 250px */

This surprises nearly everyone. Most stylesheets switch to box-sizing: border-box, where width includes the padding and border, so a 200px box is really 200px wide. That is explained in Width, Height and box-sizing.

Inspecting boxes#

Right-click any element and choose Inspect. In the developer tools, the Computed (or Layout) panel shows a diagram of the element's content, padding, border and margin with their exact sizes, and hovering an element highlights each layer in a different colour on the page. This is the fastest way to find out where unexpected space comes from.

Margin collapsing#

When two vertical margins meet, they do not add up. They collapse into one margin the size of the larger:

.a { margin-bottom: 30px; background: #cfe3ff; }
.b { margin-top: 20px; background: #c9f0d3; }

<p class="a">margin-bottom: 30px</p>
<p class="b">margin-top: 20px</p>
<p>The gap between the first two paragraphs is 30px, not 50px.</p>

Margin collapsing happens only:

• for vertical (top and bottom) margins, never left and right;
• between normal block boxes, such as stacked paragraphs, or between a parent and its first or last child when nothing (padding, border or content) separates them.

It does not happen inside Flexbox or Grid containers. A parent's padding or border stops a child's margin from collapsing through it, which is why the first example's .outer has padding: 1px.

Inline boxes#

Inline elements such as <span> and <a> follow slightly different rules: horizontal padding, borders and margins push neighbouring text apart, but vertical margins have no effect and vertical padding does not move the surrounding lines. To give an inline element full box behaviour, change its display to inline-block or block.

Practice#

.notice {
  padding: 16px;
  border-left: 4px solid orange;
  background: #fff4e0;
  margin-bottom: 12px;
}

<div class="notice">Classes resume on Monday.</div>
<p>Next paragraph.</p>

Key takeaway#