CSS Part 3: The box model

Every element on a page is a rectangle, even the ones that look round. Once you see the four layers of that rectangle, spacing in CSS stops being guesswork.

The four layers

From the inside out:

1. Content: the text or image itself.
2. Padding: space inside the box, between the content and the border. The background colour fills it.
3. Border: the line around the padding.
4. Margin: space outside the border that pushes other elements away. It's always see-through.

.card {  width: 300px;  padding: 20px;  border: 2px solid #ddd;  margin: 16px;}

How wide is it, really?

By default, width sets only the content, so the card's padding and border get added on top: 300 + 20 + 20 + 2 + 2 = 344 pixels. This catches out nearly everyone the first time.

The fix is one rule at the top of your stylesheet:

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

Now width: 300px means the whole box, border included, and the content shrinks to make room for the padding. Almost every modern site starts with this rule.

Writing padding and margin

You can set each side on its own, or use shorthands that go clockwise from the top:

padding: 20px;               /* all four sides */padding: 10px 20px;          /* top and bottom 10, left and right 20 */padding: 5px 10px 15px 20px; /* top, right, bottom, left */padding-left: 20px;          /* one side only */

For the four-value version, picture a clock: start at 12 and go round. Margin works exactly the same way.

To centre a box across the page, give it a maximum width and automatic side margins:

.page {  max-width: 800px;  margin: 0 auto;}

Margins that merge

When two elements sit one above the other, their vertical margins don't add up. The bigger one wins. A heading with margin-bottom: 30px above a paragraph with margin-top: 20px leaves a 30px gap, not 50px. This is called margin collapsing. Padding never collapses, and neither do side margins. Inside flexbox and grid (Parts 5 and 6), margins don't merge at all.

Block and inline

Some elements, like <p>, <div> and <h1>, are block elements. They start on a new line and stretch across all the width they can. Others, like <a>, <span> and <strong>, are inline. They sit inside a line of text and are only as wide as their content.

Inline elements ignore width and height, and their top and bottom margins don't push anything away. If you need those on an inline element, give it display: inline-block. You can also switch any element with display: block or display: inline.

See it in DevTools

Inspect an element and open the Computed tab. The diagram at the top shows its content, padding, border and margin with exact sizes, and hovering over each layer highlights it on the page.

Try it

Style the project cards from HTML Part 5: width: 300px, some padding, a light border, rounded corners with border-radius: 12px, and margin between the cards. Then turn box-sizing: border-box off and on, and watch the card's width change in DevTools.

Next: CSS Part 4: Colour, units and fonts