The Box Model — HTML & CSS Course

What you'll learn

Here's the single most important idea in CSS layout: every element is a box. Understanding the four layers of that box — and how their sizes add up — is the difference between fighting CSS and controlling it. Get this right and everything else gets easier.

By the end you'll be able to:

Describe the box model: content, padding, border, margin
Use box-sizing: border-box for predictable sizing
Understand margin collapsing
Tell block, inline, and inline-block boxes apart

The four layers

Working from the inside out, every element's box has four layers. Padding is space inside the border; margin is space outside it, pushing other elements away:

Layer	What it is
`Content`	The actual text or image — sized by width/height
`Padding`	Transparent space between the content and the border
`Border`	A line around the padding
`Margin`	Transparent space outside the border, separating elements

box.css

.card {
  width: 300px;
  padding: 20px;              /* space inside, around the content */
  border: 2px solid #2563eb; /* the edge */
  margin: 16px;              /* space outside, pushing others away */
}

box-model.html

Live preview

Content wrapped by padding, then a margin band around it.

box-sizing — the crucial setting

By default, width sets only the content width — so padding and border are added on top. A 300px box with 20px padding and a 2px border is actually 344px wide! That surprises everyone. The fix is one line you should put in every project:

reset.css

/* Put this at the top of every stylesheet */
*, *::before, *::after {
  box-sizing: border-box;
}

Key idea

box-sizing: border-box makes width include padding and border, so a 300px box is actually 300px wide no matter its padding. Applying it to * (every element) is the most popular CSS "reset" there is — do it once and sizing becomes intuitive.

Margins & collapsing

Set each side individually (margin-top…) or use shorthand: margin: 10px (all sides), margin: 10px 20px (top/bottom, then left/right), or four values clockwise from the top. One quirk to know: the vertical margins between two stacked block elements collapse into a single margin — the larger of the two — rather than adding together.

Note

Margin collapsing only affects vertical margins between block boxes, and it trips up beginners who expect 20px + 20px = 40px of gap but see only 20px. If you need guaranteed spacing, padding doesn't collapse — or use gap in Flexbox/Grid (Phase 4).

Display & overflow

The display property changes how a box behaves in the flow:

block — starts on a new line and fills the available width (div, p, h1).
inline — flows within a line and ignores width/height (span, a).
inline-block — flows inline but respects width, height, and padding — the best of both.

When content is bigger than its box, overflow decides what happens: visible (spills out, the default), hidden (clips it), scroll, or auto (scrollbars only when needed).

Recap & quick check

Key takeaways

Every element is a box with four layers: content, padding (inside), border, and margin (outside).
By default width sizes only the content, so padding and border add to the total.
box-sizing: border-box makes width include padding and border — apply it to * as a reset.
Vertical margins between block elements collapse to the larger value, not the sum.
display controls flow: block, inline, or inline-block; overflow controls content that spills out.

Quick check

1. From inside out, what is the order of the box model layers?

2. What does box-sizing: border-box do?

3. Padding is space...

4. Two stacked blocks have 20px top and bottom margins between them. The gap is:

5. Which display value flows inline but respects width and height?

With the box model mastered, styling gets predictable. Next we add visual polish with backgrounds, borders, and shadows.