← HTML & CSS

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.

Part of: HTML and CSS Journey — Module 46

What it does: margin: 20px adds 20px of space outside the paragraph's border on all four sides, pushing surrounding elements away. margin-top and margin-bottom set only their respective sides. The left and right margins remain at their default value. auto splits the remaining horizontal space equally on both sides, centering the element. The element must have a fixed width. The margin shorthand accepts 1, 2, 3 or 4 values. Five values is invalid and will be ignored by the browser. Unlike padding, margin can be negative. Negative margins pull an element closer to or overlapping its neighbours. The colon is required in CSS between the property name and its value. Without it, the declaration is invalid.

Common mistakes: CSS declarations require a colon. It should be margin: 10px; not margin 10px;. The margin shorthand accepts 1, 2, 3 or 4 values — not 5. Five values is invalid CSS.

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 Margin (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

What does margin: 10px 20px; set?

10px top/bottom and 20px left/right10px left and 20px top

Matches

p { margin 10px; }

↓

CSS declarations require a colon — it should be margin: 10px; not margin 10px;

Applying

Meanings

Term

margin

Meaning

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.

Practice

body { margin: 0; }

Testing

Gaps

p { : 10px; }

Check Answer

Spots

1p { margin 10px; }

2h1 { margin: 20px; }

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. What does margin: 10px 20px; set?

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

B. 10px left and 20px top

With two values, the first sets top and bottom, the second sets left and right. This is the standard 2-value shorthand.

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

A. Horizontally centres the element ✓

B. Removes all margin

auto splits the remaining horizontal space equally on both sides, centering the element. The element must have a fixed width.

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

A. False ✓

B. True

Margin is outside the border. Padding adds space inside the border. Margin affects the space between elements.

4. Which property sets only the bottom margin?

A. margin-bottom ✓

B. margin-top

margin-bottom sets only the bottom side. Each side has its own longhand property: margin-top, margin-right, margin-bottom, margin-left.

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

A. False ✓

B. True

The margin shorthand accepts 1, 2, 3 or 4 values. Five values is invalid and will be ignored by the browser.

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

Key Term

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.

Fill in the Blanks

1. p { margin: 10px; }

Hint: Type the CSS property name that sets space outside an element's border

2. div { margin-top: 20px; }

Hint: Type the CSS longhand property name that sets only the top outside spacing

3. div { margin: 0 auto; }

Hint: Type the CSS value that lets the browser split the remaining space equally to centre an element

4. a { margin-left: 12px; }

Hint: Type the CSS longhand property name that sets only the left outside spacing

5. p { margin: 10px 20px; }

Hint: Type the CSS value that sets the left and right margin to 20 pixels

Spot the Error

Question 1

A p { margin 10px; }

B h1 { margin: 20px; }

C div { margin: 0 auto; }

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

Question 2

A p { margin: 10px; }

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

C h1 { margin: 0; }

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

Question 3

A p { margin: 10px; }

B h1 { margin: 0 auto; }

C div { margin-top 15px; }

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

Question 4

A p { margin: 0; }

B div { margin: 0 auto; }

C h2 { margin: 10px 0; }

D a { margin: top 10px; }

Line D — 'margin: top 10px' is invalid. To set only the top margin, use 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; }

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

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?