The box model

Here's a secret that makes CSS layout make sense: every single element on a page is a rectangle. Headings, paragraphs, images, links, all of them are boxes. Even when something looks round, there's a rectangle around it.

Understanding how those boxes work is called the box model, and it's the key to controlling space on your pages.

Every box has four layers, from the inside out:

1. Content is the text, image or whatever is inside
2. Padding is the space between the content and the border
3. Border is a line around the padding (it can also be invisible)
4. Margin is the space outside the border, pushing other boxes away

A useful way to remember the difference: padding is inside the box, margin is outside it. If the box has a background color, the padding gets that color too, but the margin is always transparent.

You can see all four layers on any element. Open the developer tools with Inspect and look for the Computed tab. At the top there's a colorful diagram of the element's box, with each layer labeled. Hover over it and the browser highlights the layers on the page.

Padding, margin and border can be set for each side on its own:

Or with a shorthand that goes clockwise from the top, like a clock: top, right, bottom, left.

The two value version is the one you'll use most.

A border needs three things: a width, a style and a color.

The style is usually solid, but dashed and dotted exist too. border-radius rounds the corners, and it works even without a visible border. Give a square image border-radius: 50% and it becomes a circle, which is perfect for a profile photo.

By default, if you give a box width: 300px and then add padding and a border, the box ends up wider than 300 pixels. The padding and border are added on top. That surprises everyone.

The fix is one rule that almost every developer puts at the top of their stylesheet:

The * selector picks every element. With border-box, the width you set includes the padding and border, which is what you'd expect. Add it to your stylesheet and you'll never have to think about it again.

Not every box behaves the same way. There are two main kinds:

• Block elements, like p, h1, section and div, start on a new line and stretch across the full width available.
• Inline elements, like a, strong and span, sit inside a line of text and are only as wide as their content.

Inline elements ignore width, height and top and bottom margin. If you need those on an inline element, like a link that should look like a button, change its display:

inline-block keeps it in the line but lets it have a size and padding like a block.

A classic question: how do you center something? For a block element with a width, set the left and right margins to auto:

max-width means "at most 800 pixels, but smaller if the screen is smaller". The auto margins split the leftover space evenly on both sides, which centers the box. This is how most websites keep their content in a nice readable column in the middle of a wide screen.