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.