Box model calculation in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the box to 200 pixels.

CSS

div {
  width: [1];
}

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

A200

Bpx200

Cwidth: 200px

D200px

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add units like px

Writing the property name again inside the value

The width property requires a length value with units like px. So 200px is correct.

2fill in blank

medium

Complete the code to add 10 pixels of padding inside the box.

CSS

div {
  padding: [1];
}

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

A10px

Bpadding: 10px

Cpx10

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using just a number without units

Repeating the property name inside the value

Padding needs a length value with units, so 10px is correct.

3fill in blank

hard

Fix the error in the code to correctly set the margin to 15 pixels.

CSS

div {
  margin: [1];
}

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

Apx15

B15px

Cmargin 15px

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out units

Writing property name inside the value

The margin property needs a length with units like 15px. Just 15 is not valid.

4fill in blank

hard

Fill both blanks to set the border width to 5 pixels and border style to solid.

CSS

div {
  border-width: [1];
  border-style: [2];
}

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

A5px

Bsolid

Cdotted

D10px

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without units for border-width

Choosing a border style that is not solid

The border width needs a size with units like 5px, and the border style should be solid to show a solid line.

5fill in blank

hard

Fill all three blanks to create a box with width 100px, padding 20px, and margin 30px.

CSS

div {
  width: [1];
  padding: [2];
  margin: [3];
}

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

A100px

B20px

C30px

D50px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up padding and margin values

Forgetting units on any size

Width is set to 100px, padding to 20px, and margin to 30px to create the desired box spacing.