Block vs inline vs inline-block in CSS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the element a block-level element.

CSS

div {
  display: [1];
}

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

Ablock

Bnone

Cinline-block

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' instead of 'block' which does not make the element block-level.

Using 'inline-block' which behaves differently.

The block value makes the element a block-level element, which takes the full width available and starts on a new line.

2fill in blank

medium

Complete the code to make the element behave like an inline element.

CSS

span {
  display: [1];
}

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

Ainline-block

Bblock

Cflex

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which makes the element take full width.

Using 'flex' which changes layout behavior.

The inline value makes the element behave like an inline element, which does not start on a new line and only takes as much width as necessary.

3fill in blank

hard

Fix the error in the code to make the element behave like an inline-block element.

CSS

button {
  display: [1];
  width: 100px;
  height: 40px;
}

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

Agrid

Binline

Cinline-block

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' which ignores width and height.

Using 'block' which breaks inline flow.

The inline-block value allows the element to flow inline but also accept width and height.

4fill in blank

hard

Fill both blanks to create a CSS rule that makes a paragraph inline-block and centers it horizontally.

CSS

p {
  display: [1];
  margin-left: [2];
  margin-right: [2];
}

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

Ainline-block

Bauto

Cblock

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which makes the element take full width and not inline.

Using 'center' as a margin value which is invalid.

Setting display to inline-block allows the paragraph to have width and height but flow inline. Using margin-left and margin-right as auto centers the element horizontally.

5fill in blank

hard

Fill all three blanks to create a CSS rule that makes a div inline-block, sets its width to 200px, and adds a 10px margin.

CSS

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

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

Ablock

B200px

C10px

Dinline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which breaks inline flow.

Using numbers without units for width or margin.

Setting display to inline-block allows the div to flow inline but accept width and margin. The width is set to 200px and margin to 10px to add space around it.