The box model

Introduction

Every element on a page is a rectangle. Even a round image is a rectangle with its corners hidden. The way CSS sizes and spaces those rectangles is the box model, and nearly every layout problem you will ever have comes down to it. People who struggle with CSS have often never been properly shown this one idea.

How it works

Four layers, from the inside out.

1. Content: the text, image or child elements.
2. Padding: clear space around the content, inside the border. The background shows through it.
3. Border: a line around the padding.
4. Margin: clear space outside the border, which pushes other boxes away. It is always transparent.

Shorthand. Many box properties accept one to four values, going clockwise from the top:

The width trap. By default, width sets only the content. If a box has width: 200px, padding: 20px and a 1px border, then it is actually 242 pixels wide. Fitting boxes together then requires tedious arithmetic.

box-sizing: border-box fixes this. Now width includes padding and border, and the box really is 200 pixels wide. Nearly every modern project starts with this rule:

*, *::before, *::after { box-sizing: border-box; }

Margin collapse. When two vertical margins touch, they merge into one, the size of the larger. A paragraph with a bottom margin of 20px, followed by one with a top margin of 30px, has a gap of 30px and not 50px. This is why paragraphs do not end up with doubled gaps. It applies only to top and bottom margins in normal flow. Inside flexbox or grid, margins do not collapse.

Centring a block. Give it a width and set the side margins to auto. The browser shares the leftover space equally. A max-width is better than width, since the box can still shrink on a small screen.

Overflow. When content is bigger than its box, overflow decides what happens. visible lets it spill, hidden cuts it off, auto adds a scrollbar when needed, and scroll always shows one.

Inline elements are different. Elements such as span and a ignore width and height, and their vertical margins have no effect. If you need those, change them with display: inline-block, which you will see in a later lesson.

Syntax

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  border: 1px solid gray;
  margin: 0 auto;
}

Example

Line by line

1. Both boxes share width: 200px, padding: 20px and a 1px border.
2. The first uses the default sizing, so the padding and the border are added to the width.
3. The second has border-box, so they are taken from inside the width.

Expected result

Two boxes where the upper one is visibly wider, 242 pixels against 200, even though both say width: 200px.

In the real world

CSS frameworks all apply border-box globally. Browser developer tools show a diagram of the four layers for any element you select, and it is the first thing most developers check when something is out of place.

Common mistakes

• Adding padding and overflowing a parent, because border-box was not set.
• Being surprised by margin collapse.
• Trying to give a span a width.
• Using margin where padding is needed: clickable areas and backgrounds only cover the padding.

Best practices

• Apply border-box to everything at the start of a project.
• Use max-width instead of width for large blocks.
• Use padding for space inside and margin for space between.
• Use the box model diagram in your developer tools.

Summary

Every element is content, padding, border and margin. border-box makes the width include padding and border. Adjacent vertical margins collapse. margin: 0 auto centres a block that has a width.

Mark lesson complete