The box model — HTML and CSS for kids

Code tip

Inside out, twice — “add padding, border and margin on both sides of the content”

1. From the inside out: content → padding → border → margin.
2. Border to border = width + 2 × padding + 2 × border.
3. Total space = width + 2 × padding + 2 × border + 2 × margin.

Use it for: Working out why a box is wider than expected and fitting boxes side by side.

Worked example: 📦 How much space across (px) does this box take in all, margin included?
.box {
  width: 210px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
} → 264

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

🏁 Lesson 16 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the 📦 Box Model Master badge when you pass — and a certificate when you finish all 10 lessons of Part 2 · CSS. You can still take the test without signing in.

🖨️ CSS Worksheet: Box Model

• Worksheet set 1 (PDF)
• Worksheet set 2 (PDF)
• Worksheet set 3 (PDF)