The box model

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which layer sits directly outside the content area?

A padding

B margin

2. Which layer sits outside the border?

A padding

B margin

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

4. Which box-sizing value makes width include padding and border?

A border-box

B content-box

5. Is padding inside or outside the border?

A inside

B outside

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1padding: 20px;		Acontent
2margin: 10px;		BMisspelled property — should be margin: 10px;
3The innermost layer — where text and child elements sit		CAdds 10px of space outside the border, separating elements
4Makes width and height include padding and border		Dbox-sizing: border-box;
5border 2px solid black;		EMissing colon — should be border: 2px solid black;
6margn: 10px;		FAdds 20px of space between the content and the border

Definitions

box model

Fill in the Blanks

Complete each line of code by filling in the missing parts.

div { _______ 20px; border: 1px solid gray; }

div { padding: 20px; ______: 10px; }

div { _____: 200px; padding: 10px; }

div { border: ___ solid black; margin: 5px; }

div { box-sizing: __________; width: 100px; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A div.hover {

B padding: 10px;

C margin: 5px;

Question 2

A div {

B padding 15px;

C margin: 10px;

Question 3

A div {

B border: 2px solid black;

C colour: red;

Question 4

A div {

B width: 200px;

C padding: 20px;

D margn: 10px;

Question 5

A div {

B width: 100px;

C padding: 10px;

D border: 1px solid gray;

E box-sizing: content-box

Answer Key

The box model

Section A: Quick Questions

A — padding

B — margin

B — content area only

A — border-box

A — inside

Section B: 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;

Section C: Definitions

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.

Section D: Fill in the Blanks

div {
  padding: 20px;
  border: 1px solid gray;
}

div {
  padding: 20px;
  margin: 10px;
}

div {
  width: 200px;
  padding: 10px;
}

div {
  border: 2px solid black;
  margin: 5px;
}

div {
  box-sizing: border-box;
  width: 100px;
}

Section E: Spot the Error

A — div.hover targets a div with class='hover', not all divs. To style all div elements, use div {} without a class selector.

B — A colon is missing after the property name. It should be padding: 15px; not padding 15px;

C — The CSS property is color (American English), not colour. It should be color: red; not colour: red;

D — The property name is misspelled. It should be margin: 10px; not margn: 10px;

E — The last declaration is missing a semicolon. It should be box-sizing: content-box; not box-sizing: content-box