← HTML & CSS

The box model

Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.

Part of: HTML and CSS Journey — Module 43, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 36

Understanding The box model in HTML & CSS

What it does: The content area is the core of the box model, holding the element's actual content. border-box is widely used because the element's total size matches the declared width. The order outward is: content → padding → border → margin. Margin is the outermost layer — it separates the element from its neighbours. Margin is outside the border — it pushes other elements away. CSS declarations always need a colon between the property name and its value. Property names must be spelled exactly. 'margn' is not a valid CSS property.

Common mistakes: div.hover targets a div with class='hover', not all divs. To style all div elements, use div {} without a class selector. A colon is missing after the property name. It should be padding: 15px; not padding 15px;.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add The box model to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which layer sits directly outside the content area?
paddingmargin
Matches
border 2px solid black;
↓
Missing colon — should be border: 2px solid black;
Applying
Meanings
Term
box model
Meaning
Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.
Practice
div {
Testing
Gaps
20px;
Check Answer
Spots
1div.hover {
2 padding: 10px;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Camel' badge — Endurance Champion, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which layer sits directly outside the content area?
A. padding ✓
B. margin
The order outward is: content → padding → border → margin.
2. Which layer sits outside the border?
A. padding
B. margin ✓
Margin is the outermost layer — it separates the element from its neighbours.
3. By default, does width apply to the content area only, or include padding and border?
A. includes padding and border
B. content area only ✓
The default box-sizing is content-box. Set box-sizing: border-box to include padding and border in the width.
4. Which box-sizing value makes width include padding and border?
A. border-box ✓
B. content-box
border-box is popular because the total element size matches the declared width value.
5. Is padding inside or outside the border?
A. inside ✓
B. outside
Padding sits between the content and the border — it is always inside the border.

Match the Pairs

padding: 20px; → Adds 20px of space between the content and the border
margin: 10px; → Adds 10px of space outside the border, separating elements
The innermost layer — where text and child elements sit → content
Makes width and height include padding and border → box-sizing: border-box;
border 2px solid black; → Missing colon — should be border: 2px solid black;
margn: 10px; → Misspelled property — should be margin: 10px;

Key Term

box model
Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.

Fill in the Blanks

1. div { padding: 20px; border: 1px solid gray; }
Hint: Type the box model property that adds space between the content and the border
2. div { padding: 20px; margin: 10px; }
Hint: Type the box model property that adds space outside the border
3. div { width: 200px; padding: 10px; }
Hint: Type the box model property that sets the width of the content area
4. div { border: 2px solid black; margin: 5px; }
Hint: Type a pixel value for the border thickness
5. div { box-sizing: border-box; width: 100px; }
Hint: Type the box-sizing value that includes padding and border inside the width

Spot the Error

Question 1
A div.hover {
B padding: 10px;
C margin: 5px;
Line A — div.hover targets a div with class='hover', not all divs. To style all div elements, use div {} without a class selector.
Question 2
A div {
B padding 15px;
C margin: 10px;
Line B — A colon is missing after the property name. It should be padding: 15px; not padding 15px;
Question 3
A div {
B border: 2px solid black;
C colour: red;
Line C — The CSS property is color (American English), not colour. It should be color: red; not colour: red;
Question 4
A div {
B width: 200px;
C padding: 20px;
D margn: 10px;
Line D — The property name is misspelled. It should be margin: 10px; not margn: 10px;
Question 5
A div {
B width: 100px;
C padding: 10px;
D border: 1px solid gray;
E box-sizing: content-box
Line E — The last declaration is missing a semicolon. It should be box-sizing: content-box; not box-sizing: content-box

Student with a class code? Join your class →