Padding in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add padding of 20 pixels to all sides of the box.

CSS

div {
  padding: [1];
}

Drag options to blanks, or click blank then click option'

A20px

B10px

Cborder

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'margin' instead of 'padding'.

Using a number without units like '20'.

The padding property adds space inside the element's border. Using 20px adds 20 pixels of padding on all sides.

2fill in blank

medium

Complete the code to add padding of 10 pixels on top and bottom, and 15 pixels on left and right.

CSS

div {
  padding: [1];
}

Drag options to blanks, or click blank then click option'

A15px

B15px 10px

C10px 10px 15px 15px

D10px 15px

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the values for top/bottom and left/right.

Using only one value which applies to all sides.

The shorthand padding: 10px 15px; sets 10 pixels for top and bottom, and 15 pixels for left and right.

3fill in blank

hard

Fix the error in the code to correctly add 5 pixels padding only to the left side.

CSS

div {
  padding-[1]: 5px;
}

Drag options to blanks, or click blank then click option'

Aright

Btop

Cleft

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'padding-top' or other sides instead of 'padding-left'.

Using 'padding' shorthand when only one side is needed.

The property padding-left adds padding only to the left side of the element.

4fill in blank

hard

Fill both blanks to add 10 pixels padding on top and bottom, and 20 pixels on left and right.

CSS

div {
  padding: [1] [2];
}

Drag options to blanks, or click blank then click option'

A10px

B15px

C20px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the two values.

Using the same value for both blanks.

The first value 10px sets padding for top and bottom, the second value 20px sets padding for left and right.

5fill in blank

hard

Fill all three blanks to add padding: 5px top, 10px right, and 15px bottom.

CSS

div {
  padding-top: [1];
  padding-right: [2];
  padding-bottom: [3];
}

Drag options to blanks, or click blank then click option'

A10px

B5px

C15px

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the values for different sides.

Using shorthand when individual sides are needed.

Set padding-top to 5px, padding-right to 10px, and padding-bottom to 15px for the desired padding on each side.

Practice

1. What does the CSS padding property do in a webpage layout?

easy

A. It sets the font size of the text inside the element.

B. It adds space outside the element's border.

C. It changes the color of the element's background.

D. It creates space inside an element between the content and its border.

Solution

1. Step 1: Understand padding's role

   Padding adds space inside the element, between content and border, not outside.

2. Step 2: Differentiate from margin and other properties

   Margin adds space outside the border, background color changes color, font size changes text size.

3. Final Answer:

   It creates space inside an element between the content and its border. -> Option D

4. Quick Check:

   Padding = space inside element [OK]

Hint: Padding is inside space, margin is outside space [OK]

Common Mistakes:

• Confusing padding with margin
• Thinking padding changes background color
• Mixing padding with font size

2. Which of the following is the correct CSS syntax to set padding of 20 pixels on all sides of an element?

easy

A. padding: 20px;

B. padding: 20;

C. padding: 20px all;

D. padding: all 20px;

Solution

1. Step 1: Review CSS padding syntax

   The correct way to set padding on all sides is using a single value with units, like padding: 20px;.

2. Step 2: Identify invalid syntax

   padding: 20; misses units, padding: 20px all; and padding: all 20px; use invalid keywords.

3. Final Answer:

   padding: 20px; -> Option A

4. Quick Check:

   Use units and no extra keywords [OK]

Hint: Always include units like px for padding values [OK]

Common Mistakes:

• Omitting units like px
• Adding invalid keywords like 'all'
• Using wrong order or syntax

3. Given the CSS rule:

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

What is the padding on the right side of the div element?

medium

A. 20px

B. 10px

C. 30px

D. 40px

Solution

1. Step 1: Understand padding shorthand order

   Padding shorthand with four values sets padding in order: top, right, bottom, left.

2. Step 2: Identify right padding value

   The second value (20px) is the right padding.

3. Final Answer:

   20px -> Option A

4. Quick Check:

   Padding order: top, right, bottom, left [OK]

Hint: Remember padding order: TRBL (top, right, bottom, left) [OK]

Common Mistakes:

• Mixing up left and right values
• Assuming all sides get the first value
• Confusing padding order with margin order

4. What is wrong with this CSS code?

p { padding: 10px 20; }

medium

A. Padding values must be in percentages only.

B. Padding cannot have two values.

C. Missing units for the second padding value.

D. Padding property is misspelled.

Solution

1. Step 1: Check padding value units

   All padding values must include units like px, em, %, etc. Here, 20 lacks units.

2. Step 2: Confirm padding accepts two values

   Padding can have two values: first for top/bottom, second for left/right, but both must have units.

3. Final Answer:

   Missing units for the second padding value. -> Option C

4. Quick Check:

   All padding values need units [OK]

Hint: Every padding value needs units like px or em [OK]

Common Mistakes:

• Forgetting units on some values
• Thinking padding only accepts one value
• Assuming default units if omitted

5. You want to add padding only to the left and right sides of a section element, leaving top and bottom padding at 0. Which CSS rule achieves this correctly?

hard

A. section { padding: 15px 0; }

B. section { padding: 0 15px; }

C. section { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 0; }

D. section { padding: 15px 15px 0 0; }

Solution

1. Step 1: Understand two-value padding shorthand

   When two values are given, the first is top/bottom, the second is left/right.

2. Step 2: Check which option sets top/bottom to 0 and left/right to 15px

   section { padding: 0 15px; } sets top/bottom padding to 0 and left/right padding to 15px correctly.

3. Step 3: Verify other options

   section { padding: 15px 0; } reverses values (top/bottom 15px, left/right 0px). section { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 0; } sets top padding to 15px incorrectly. section { padding: 15px 15px 0 0; } sets top/right 15px, bottom/left 0px.

4. Final Answer:

   section { padding: 0 15px; } -> Option B

5. Quick Check:

   Two-value padding: top/bottom, left/right [OK]

Hint: Two values: first = top/bottom, second = left/right [OK]

Common Mistakes:

• Mixing order of padding values
• Using verbose longhand unnecessarily
• Setting wrong sides with incorrect shorthand