← HTML & CSS

Padding

A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.

Part of: HTML and CSS Journey — Module 44

What it does: padding: 20px adds 20px of space on all four sides inside the border, pushing the content away from the edges. padding-top and padding-left set only their respective sides, leaving the other sides unchanged. With two values, the first sets top and bottom, the second sets left and right. This is the standard 2-value shorthand pattern. The padding shorthand accepts 1, 2, 3 or 4 values. Five values is invalid and will be ignored by the browser.

Common mistakes: CSS declarations require a colon. It should be padding: 10px; not padding 10px;. The padding 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 Padding (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

What does padding: 10px 20px; set?

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

Matches

p { padding: -10px; }

↓

Padding cannot be negative — use margin for negative spacing, or padding: 0 to remove padding

Applying

Meanings

Term

padding

Meaning

A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.

Practice

p {

Testing

Gaps

p { : 10px; }

Check Answer

Spots

1p { padding 10px; }

2h1 { padding: 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 padding: 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 pattern.

2. What is the order of sides in a 4-value padding shorthand?

A. Top, right, bottom, left (clockwise) ✓

B. Top, bottom, left, right

The 4-value shorthand goes clockwise: top → right → bottom → left. A common mnemonic is TRBL (trouble).

3. True or false: padding adds space outside the element's border.

A. False ✓

B. True

Padding is inside the border. Margin adds space outside the border. This distinction is fundamental to the CSS box model.

4. Which property sets only the left-side padding?

A. padding-left ✓

B. padding-right

padding-left sets only the left side. Each of the four sides has its own longhand property.

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

A. False ✓

B. True

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

Match the Pairs

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

div { padding: 5px 10px 15px 20px; } → Sets padding clockwise: 5px top, 10px right, 15px bottom, 20px left

Padding adds space inside the border — between the content and the element's edge → p { padding: 20px; }

Individual side properties let you set padding on one side only → a { padding-top: 5px; padding-left: 12px; }

p { padding: -10px; } → Padding cannot be negative — use margin for negative spacing, or padding: 0 to remove padding

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

Key Term

padding

A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.

Fill in the Blanks

1. p { padding: 10px; }

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

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

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

3. a { padding-left: 12px; }

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

4. p { padding: 10px 20px; }

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

5. div { padding-bottom: 0; }

Hint: Type the CSS longhand property name that sets only the bottom inside spacing

Spot the Error

Question 1

A p { padding 10px; }

B h1 { padding: 20px; }

C div { padding: 5px 10px; }

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

Question 2

A p { padding: 10px; }

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

C a { padding: 5px; }

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

Question 3

A p { padding: 10px; }

B h1 { padding: 0 20px; }

C div { padding-top 15px; }

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

Question 4

A p { padding: 10px; }

B div { padding: 5px 10px; }

C h2 { padding: 0; }

D a { padding: top 10px; }

Line D — 'padding: top 10px' is invalid. To set only the top padding use padding-top: 10px; or include all sides in the shorthand.

Question 5

A p { padding: 10px; }

B h1 { padding: 20px 0; }

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

D span { padding: 8px; }

E a { padding-left 12px; }

Line E — CSS declarations require a colon. It should be padding-left: 12px; not padding-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?