← 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

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 journey and assign it to your class.

🖨 Print Worksheet and Answer key of The box model (PDF)

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.

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.

Teach this with your 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. margin ✓

B. padding

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. content area only ✓

B. includes padding and border

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

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?