Margin

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. What does margin: 10px 20px; set?

A 10px top/bottom and 20px left/right

B 10px left and 20px top

2. What does margin: 0 auto; do to a block element with a fixed width?

A Horizontally centres the element

B Removes all margin

3. True or false: margin adds space inside the element's border.

A True

B False

4. Which property sets only the bottom margin?

A margin-top

B margin-bottom

5. True or false: margin: 10px 20px 30px 40px 50px is valid CSS.

A False

B True

Match the Pairs

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

Left column		Right column
1p { margin: 10px 20px; }		Ah1 { margin-top: 0; margin-bottom: 24px; }
2div { width: 800px; margin: 0 auto; }		BCSS declarations require a colon — it should be margin: 10px; not margin 10px;
3Margin adds space outside the border — it separates elements from each other		CSets 10px margin on top and bottom, 20px on left and right — the 2-value shorthand
4Individual side properties let you set margin on one side without affecting others		DHorizontally centres the div — auto splits the remaining horizontal space equally on both sides
5p { margin 10px; }		Ep { margin: 20px; }
6div { margin: 10px, 20px; }		FMargin shorthand values must be separated by spaces, not commas — write margin: 10px 20px

Definitions

margin

Fill in the Blanks

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

p { ______: 10px; }

div { __________: 20px; }

div { margin: 0 ____; }

a { ___________: 12px; }

p { margin: 10px ____; }

Spot the Error

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

Question 1

A p { margin 10px; }

B h1 { margin: 20px; }

C div { margin: 0 auto; }

Question 2

A p { margin: 10px; }

B div { margin: 10px 20px 30px 40px 50px; }

C h1 { margin: 0; }

Question 3

A p { margin: 10px; }

B h1 { margin: 0 auto; }

C div { margin-top 15px; }

Question 4

A p { margin: 0; }

B div { margin: 0 auto; }

C h2 { margin: 10px 0; }

D a { margin: top 10px; }

Question 5

A p { margin: 10px; }

B h1 { margin: 20px 0; }

C div { margin: 5px 10px 15px; }

D span { margin: 8px; }

E a { margin-left 12px; }

Answer Key

Margin

Section A: Quick Questions

A — 10px top/bottom and 20px left/right

A — Horizontally centres the element

B — False

B — margin-bottom

A — False

Section B: Match the Pairs

p { margin: 10px 20px; } → Sets 10px margin on top and bottom, 20px on left and right — the 2-value shorthand

div { width: 800px; margin: 0 auto; } → Horizontally centres the div — auto splits the remaining horizontal space equally on both sides

Margin adds space outside the border — it separates elements from each other → p { margin: 20px; }

Individual side properties let you set margin on one side without affecting others → h1 { margin-top: 0; margin-bottom: 24px; }

p { margin 10px; } → CSS declarations require a colon — it should be margin: 10px; not margin 10px;

div { margin: 10px, 20px; } → Margin shorthand values must be separated by spaces, not commas — write margin: 10px 20px

Section C: Definitions

margin — A CSS property that adds space outside an element's border, between it and surrounding elements. Unlike padding, margin is outside the element's background.

Section D: Fill in the Blanks

p { margin: 10px; }

div { margin-top: 20px; }

div { margin: 0 auto; }

a { margin-left: 12px; }

p { margin: 10px 20px; }

Section E: Spot the Error

A — CSS declarations require a colon. It should be margin: 10px; not margin 10px;

B — The margin shorthand accepts 1, 2, 3 or 4 values — not 5. Five values is invalid CSS.

C — CSS declarations require a colon. It should be margin-top: 15px; not margin-top 15px;

D — 'margin: top 10px' is invalid. To set only the top margin, use margin-top: 10px;

E — CSS declarations require a colon. It should be margin-left: 12px; not margin-left 12px;