Padding

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A 10px left and 20px top

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

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

A Top, right, bottom, left (clockwise)

B Top, bottom, left, right

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

A False

B True

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

A padding-left

B padding-right

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

A True

B False

Match the Pairs

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

Left column		Right column
1p { padding: 10px 20px; }		Aa { padding-top: 5px; padding-left: 12px; }
2div { padding: 5px 10px 15px 20px; }		BPadding shorthand values must be separated by spaces, not commas — write padding: 10px 20px
3Padding adds space inside the border — between the content and the element's edge		Cp { padding: 20px; }
4Individual side properties let you set padding on one side only		DSets padding clockwise: 5px top, 10px right, 15px bottom, 20px left
5p { padding: -10px; }		EPadding cannot be negative — use margin for negative spacing, or padding: 0 to remove padding
6div { padding: 10px, 20px; }		FSets 10px padding on top and bottom, 20px on left and right — the 2-value shorthand

Definitions

padding

Fill in the Blanks

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

p { _______: 10px; }

div { ___________: 20px; }

a { ____________: 12px; }

p { padding: 10px ____; }

div { ______________: 0; }

Spot the Error

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

Question 1

A p { padding 10px; }

B h1 { padding: 20px; }

C div { padding: 5px 10px; }

Question 2

A p { padding: 10px; }

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

C a { padding: 5px; }

Question 3

A p { padding: 10px; }

B h1 { padding: 0 20px; }

C div { padding-top 15px; }

Question 4

A p { padding: 10px; }

B div { padding: 5px 10px; }

C h2 { padding: 0; }

D a { padding: top 10px; }

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; }

Answer Key

Padding

Section A: Quick Questions

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

A — Top, right, bottom, left (clockwise)

A — False

A — padding-left

B — False

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

Section C: Definitions

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.

Section D: Fill in the Blanks

p { padding: 10px; }

div { padding-top: 20px; }

a { padding-left: 12px; }

p { padding: 10px 20px; }

div { padding-bottom: 0; }

Section E: Spot the Error

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

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

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

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

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