The Box Model

Here is the single most important idea in all of CSS: every element on your page is a rectangular box. Every heading, paragraph, image, and link. Even if you cannot see the edges, the box is there. Once you can see pages as boxes, CSS stops feeling mysterious. Each box has four layers, from the inside out:

1. Content: the text or image itself.
2. Padding: empty space between the content and the border. It is inside the box.
3. Border: the edge of the box. It can be visible or invisible.
4. Margin: empty space outside the border, pushing other boxes away.

A picture in words: imagine a framed photo on a wall. The photo is the content. The matting between the photo and the frame is the padding. The frame itself is the border. And the empty wall space you leave so it does not touch the next photo is the margin.

Padding and margin in practice

.notice {
  padding: 16px;
  margin: 24px;
  border: 2px solid teal;
}

This gives the element 16px of space inside its border and 24px of space outside it. One number applies to all four sides. You can also set sides individually with padding-top, padding-right, padding-bottom, and padding-left, and the same pattern works for margin.

There is also a two-value shorthand you will see everywhere: padding: 8px 16px; means 8px on top and bottom, 16px on left and right.

Padding or margin: which one?

Beginners mix these up constantly, so here is the rule of thumb. Ask: do I want space inside the box, between the content and its edge? That is padding. Do I want space outside the box, between this element and its neighbors? That is margin. If a colored box feels cramped, add padding. If two boxes are touching, add margin.

A quick fix you should always use

By default, when you set a width on an element, padding and border get added on top of that width, which makes the box bigger than you asked for. Almost everyone finds this confusing, so almost everyone turns it off with this rule:

* {
  box-sizing: border-box;
}

The * selector means "every element". With border-box, the width you set is the full width of the box, padding and border included. Add this to the top of your stylesheet and sizing becomes much more predictable.

Centering with margin

One classic trick before we finish. If a box has a set width, you can center it horizontally by letting the margins share the leftover space equally:

.content {
  width: 600px;
  margin: 0 auto;
}

The auto tells the browser to split the remaining space evenly between left and right. This is how most websites center their main content column, and you will use it in the final module of this course.