Lesson 3: The Box Model

Almost every "why is my layout doing this" moment traces back to one thing: not understanding the box model. Every single element on a page is a rectangular box, and this lesson is about exactly how big that box really is — which is rarely just what you typed.

Every element is four boxes, nested

From the inside out, every element is made of four layers:

content

Content — the actual text or media inside
Padding — space between the content and the border
Border — a line (or nothing) wrapping the padding
Margin — space outside the border, pushing other elements away

You already used padding and margin in Lesson 2 — this lesson is about the part that trips people up: how they all combine to determine an element's real, final size.

The math that surprises everyone

Say you set this:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

You might expect the box to be 200px wide. By default, it isn't. The browser adds padding and border on top of your width:

200px (width)
+ 20px + 20px (padding, left and right)
+ 5px + 5px (border, left and right)
= 250px total rendered width

This is the single most common source of "my layout is 50px wider than I expected" bugs — and it has a one-line fix.

box-sizing: the fix everyone should use

* {
  box-sizing: border-box;
}

This one line changes the rule: width now includes padding and border inside the number you set, instead of adding to it. With border-box, a width: 200px box stays exactly 200px, no matter how much padding or border you add — the content area just shrinks to make room.

quick tip

Adding * { box-sizing: border-box; } at the very top of your stylesheet is standard practice on almost every real project. It makes sizing predictable, and there's essentially no downside — most developers add it by habit on day one of every new project.

Margin vs. padding: when to use which

	Padding	Margin
Location	Inside the border	Outside the border
Affected by background color?	Yes — background extends into padding	No — margin is always transparent
Use it for	Breathing room around content inside a box	Space between separate elements

Margin collapsing: a quirk worth knowing

When two elements stack vertically and both have margin, CSS doesn't always add the two margins together. If element A has margin-bottom: 20px and element B right below it has margin-top: 30px, the gap between them is 30px (the larger one), not 50px. This only happens with vertical margins between normal block elements — it's a common source of "why isn't my spacing what I calculated" confusion.

Constraining size: max-width and min-width

.container {
  width: 100%;
  max-width: 800px; /* never grows past 800px, even on huge screens */
  margin: 0 auto;   /* centers it horizontally */
}

max-width combined with width: 100% is the standard pattern for a page that's responsive (shrinks on small screens) but doesn't stretch uncomfortably wide on a large monitor. margin: 0 auto is the classic trick for centering a block element horizontally once it has a defined width.

Try it yourself

exercise

Take the .card from Lesson 2 and add width: 300px to it. Open your browser's dev tools (right-click → Inspect), click on the card element, and look for the box model diagram in the Styles panel — it shows you the exact content/padding/border/margin values live. Then add box-sizing: border-box and watch the numbers change.

Level up: build a centered, constrained layout

exercise 2

Wrap your whole page's content in a <div class="container">, and give it max-width: 700px, width: 100%, and margin: 0 auto. Resize your browser window and watch it stay centered and readable at every width — this is the exact pattern real websites use for their main content column.

what's next

Once sizing and spacing feel predictable, Lesson 4 covers Flexbox — how to actually arrange multiple boxes next to each other, align them, and distribute space between them without guesswork.

bottom line

Every element is content, padding, border, and margin, nested in that order. Add box-sizing: border-box to everything, and your width values will finally mean what you think they mean.