The Box Model

You give a box a width of 300 pixels, and the browser draws it 342 pixels wide. Nothing is broken. To CSS, every element on a page is a rectangle, and every rectangle is built from the same four layers: the content, the padding, the border and the margin. Almost every "why is this bigger than I said?" is one of those layers doing exactly what it was told. The way they fit together is called the box model.

Think of a framed picture on a wall. There is the picture itself, the card mount around it, the frame, and the empty wall you leave before the next frame. Those four map one to one onto the four layers, and from here on the page uses their real names.

What Are the Four Layers?

The content is the middle of the box, where the text or image sits. The padding is space inside the box, between the content and the edge. The border is the edge itself, a line you can give a thickness, a style and a colour. The margin is space outside the border that keeps other boxes away.

The layers behave differently with colour. A background colour fills the content and the padding, and runs underneath the border, so padding looks like part of the box. The margin is always transparent: whatever is behind the box shows through it. That difference is the quickest way to tell padding and margin apart on a real page.

Each layer can be set on all four sides at once or one side at a time. padding: 20px puts 20 pixels on every side, while padding-top or margin-left set a single side.

Why Does Width Not Mean the Whole Box?

Here is a card with a width of 300 pixels, 20 pixels of padding and a border one pixel thick. The HTML is one div with the class card, and the CSS gives it those three numbers and a pale background so the box stands out.

<div class="card">A card, 300 pixels wide?</div>

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  background: lightyellow;
}

On screen the yellow box is 342 pixels wide, not 300. By default, width sets only the content. The padding adds 20 pixels on the left and 20 on the right, and the border adds one pixel on each side: 300, plus 40, plus 2. The same arithmetic happens to height.

That default is called content-box sizing, and it makes almost every calculation harder. Two boxes set to 50 percent each should fill a row exactly, but give them any padding and together they are wider than the row.

The One Rule That Fixes It

The box-sizing property changes what width means. Set to border-box, the width you write is the width of the whole box up to the outside of the border, and the padding and border are fitted inside it. The same card becomes exactly 300 pixels wide, with the content area shrinking to 258 to make room.

Nobody wants the old behaviour for some elements and the new one for others, so the usual habit is one rule at the top of the stylesheet that applies to every element. The star is the universal selector: it matches every element on the page. Add this rule to the top of the site's css/style.css and leave it there.

/* Width and height include padding and border */
* {
  box-sizing: border-box;
}

Reload the page and the card measures 300 pixels. Nothing else on a plain page moves, because most elements have no padding or border yet. You will often see the rule written with two extra selectors, *::before and *::after, which cover decorative boxes that CSS can generate; this book never generates any, so the star alone is enough.

What Happens Between Two Boxes?

One margin rule catches everybody once. When two blocks sit one above the other, the bottom margin of the first and the top margin of the second do not add up. They collapse into a single gap the size of the larger one. Horizontal margins, between boxes side by side, never collapse.

<p class="first">The first paragraph.</p>
<p class="second">The second paragraph.</p>

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

The first paragraph asks for 30 pixels below it and the second asks for 20 above it. The gap between them on screen is 30 pixels, not 50. This is the simplified picture: margins can also collapse through a parent in a few situations, and the flexbox and grid layouts of the next topics switch collapsing off altogether. Their gap property is the tidier way to space things out.

How Do You See the Box?

DevTools draws the box model for you. Right-click the card, choose Inspect, and look at the Computed tab next to Styles in the Elements panel. At the top is a diagram of nested rectangles labelled margin, border and padding, with the content size in the middle and each number written on its side. The same diagram appears at the bottom of the Styles pane.

Hover over any element in the Elements panel and the page lights it up with a coloured overlay: the content in blue, the padding in green, the border in yellow and the margin in orange. When something is bigger or further away than you expected, this overlay usually shows which layer is responsible in a single glance.