Learn / HTML & CSS Fundamentals / The Box Model
Lesson 2 of 6

The Box Model

Think of a framed photograph on a wall. The photo itself is the picture — but the mat around it adds breathing room, the frame adds a border, and the nail plus the gap to the next photo is the margin from its neighbor. Every single element on a web page is wrapped in exactly that stack of layers, whether it's a button, a paragraph, or a whole page section. CSS calls this the box model, and almost every "why is my layout broken" question traces back to misunderstanding it.

💡 The Bottom Line

Every element is a box made of four layers, from the inside out: content, padding, border, and margin. By default, width and height only measure the content — padding and border get added on top, which is why elements often look bigger than the size you set. box-sizing: border-box fixes that by folding padding and border into the size you declared.

The four layers

From the center out:

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

⚠️ Watch Out

By default (box-sizing: content-box), that .card above is NOT 300px wide on screen — it's 300 (content) + 40 (padding, both sides) + 4 (border, both sides) = 344px wide. Set a width, add padding, and suddenly your neatly planned 3-column layout doesn't fit anymore. This single surprise is responsible for more broken layouts than any other CSS quirk.

The fix almost everyone reaches for

box-sizing: border-box changes what width measures: it now includes padding and border, so the box you declared is the box you get.

* {
  box-sizing: border-box;
}

.card {
  width: 300px;   /* now genuinely 300px total, padding and border included */
  padding: 20px;
  border: 2px solid #ccc;
}

That universal-selector reset (*) is so common that it shows up near the top of almost every real-world stylesheet — it makes sizing behave the way most people expect from day one.

🙋 There Are No Dumb Questions

Q: If border-box is so much less confusing, why isn't it the default?
A: History — content-box was CSS's original behavior from the 1990s, and changing a long-standing default risks breaking countless existing pages. Rather than change the platform default, the community just adopted the habit of resetting it at the top of every stylesheet.

Margin vs. padding, in one sentence

Padding pushes your own content away from your own border, from the inside. Margin pushes other elements away from you, from the outside. If you want breathing room inside a button around its label, that's padding. If you want space between two buttons sitting side by side, that's margin.

🔧 Try It Yourself

Create a simple HTML file with three <div> boxes in a row, each with a background color, a width: 100px, and padding: 20px. Without box-sizing: border-box, measure (or just eyeball) how much wider than 100px each box actually renders. Then add box-sizing: border-box and watch them snap back to exactly 100px.

✅ Quick Check

A box has width: 200px; padding: 10px; border: 5px solid black; with the default box-sizing: content-box. How wide does it actually render?

Next up: now that you know every element is a box, how does CSS decide which boxes a rule even applies to — and what happens when two rules disagree? That's selectors and specificity.

← Back to
Next →