Module 2 · The Box Model · Lesson 1 of 4

The CSS Box Model

Beginner ⏱ 20 min2 sections · 1 exercise · 4-question quiz

Every element is a rectangle made of four nested layers: content, padding, border, margin. Once you can see those boxes — and control how width is calculated — layout stops being mysterious.

1. The four layers

Layer	What it is	Counts toward click area?
`content`	Text, images — the payload	Yes
`padding`	Space inside the border	Yes — shares the background
`border`	The visible edge	Yes
`margin`	Space outside, pushing neighbors away	No — always transparent

Open your browser DevTools and hover any element: the orange/green/blue diagram you see is this model. Learning to read it is learning to debug layout.

2. border-box: the sizing fix

CSS — the rule almost every site starts with

*, *::before, *::after {
  box-sizing: border-box;
}
.card {
  width: 300px;      /* now INCLUDES padding + border */
  padding: 20px;
  border: 2px solid #E1E5E8;
}

By default (content-box), width means only the content — padding and border grow the box beyond it, so a "300px" card renders 344px wide. border-box makes width mean the whole visible box. Practically every modern codebase opts in globally, and so should you.

3. Try it yourself

The two "300px" cards render different widths. Add the universal box-sizing: border-box rule at the top of the styles and watch them match.

exercise.html — editable

4. Quiz — check your understanding

The CSS Box Model Quiz

4 questions · pass at 60%

Q1. From inside out, the box model layers are…

margin, border, padding, contentcontent, padding, border, margincontent, border, padding, marginpadding, content, margin, border

Content sits at the core; padding, then border, then margin wrap around it.

Q2. Which layer is always transparent?

PaddingBorderMarginContent

Margin is pure spacing outside the border — the element's background never fills it.

Q3. With box-sizing: border-box, width: 200px means…

Content only is 200pxContent + padding + border total 200pxContent + margin total 200pxNothing — it's invalid

border-box makes the declared width the full visible box, padding and border included.

Q4. An element has width 100px, padding 10px, border 5px, default sizing. Its rendered width is…

100px115px130px110px

content-box: 100 + 10×2 padding + 5×2 border = 130px.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →