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.

Practice

1. Which CSS display property makes an element start on a new line and take the full width available?

easy

A. block

B. inline

C. inline-block

D. none

Solution

1. Step 1: Understand block behavior

   A block element always starts on a new line and stretches to fill the container's width.

2. Step 2: Compare with other display types

   Inline elements flow inside text and don't take full width; inline-block allows size but stays inline.

3. Final Answer:

   block -> Option A

4. Quick Check:

   New line + full width = block [OK]

Hint: Block = new line and full width [OK]

Common Mistakes:

• Confusing inline with block and expecting new line
• Thinking inline-block takes full width automatically
• Choosing none which hides element

2. Which of the following is the correct CSS syntax to make an element display inline-block?

easy

A. display: inline-block;

B. display: block-inline;

C. display: inlineblock;

D. display: block;

Solution

1. Step 1: Recall correct CSS property value

   The correct value to make an element inline-block is exactly inline-block with a hyphen.

2. Step 2: Check other options for syntax errors

   display: block; sets block, not inline-block. block-inline and inlineblock are invalid.

3. Final Answer:

   display: inline-block; -> Option A

4. Quick Check:

   Correct hyphenated syntax = inline-block [OK]

Hint: Use hyphen: inline-block, not inlineblock [OK]

Common Mistakes:

• Missing hyphen in inline-block
• Mixing order like block-inline
• Using block instead of inline-block

3. Given this HTML and CSS, what will be the visual layout of the boxes?

<div class='box'>Box 1</div>
<div class='box'>Box 2</div>
<style>
.box { display: inline-block; width: 100px; height: 50px; background: lightblue; margin: 5px; }
</style>

medium

A. Boxes appear inline but ignore width and height.

B. Boxes appear stacked vertically, each on a new line.

C. Boxes appear side by side horizontally with set width and height.

D. Boxes are hidden and not visible.

Solution

1. Step 1: Understand inline-block behavior

   Inline-block elements flow side by side horizontally and respect width and height settings.

2. Step 2: Apply CSS properties

   Each box has width 100px, height 50px, and margin, so they appear as separate boxes next to each other.

3. Final Answer:

   Boxes appear side by side horizontally with set width and height. -> Option C

4. Quick Check:

   Inline-block = side by side + size [OK]

Hint: Inline-block respects size and flows horizontally [OK]

Common Mistakes:

• Thinking inline-block stacks vertically like block
• Assuming inline ignores width and height
• Confusing hidden elements with display values

4. You want three buttons side by side with fixed width and height. You wrote:

<button class='btn'>One</button>
<button class='btn'>Two</button>
<button class='btn'>Three</button>
<style>
.btn { display: inline; width: 100px; height: 40px; }
</style>

Why do the buttons ignore width and height and stack oddly?

medium

A. Because buttons cannot have width or height set.

B. Because display: inline ignores width and height properties.

C. Because display: block is needed for inline layout.

D. Because margin is missing to separate buttons.

Solution

1. Step 1: Recall inline element behavior

   Inline elements ignore width and height CSS properties; they size to content only.

2. Step 2: Understand why buttons ignore size

   Setting display: inline causes buttons to ignore width and height, so they don't size as expected.

3. Final Answer:

   Because display: inline ignores width and height properties. -> Option B

4. Quick Check:

   Inline ignores size = problem [OK]

Hint: Inline elements ignore width and height [OK]

Common Mistakes:

• Thinking buttons can't have size set
• Confusing block with inline for side by side
• Assuming margin fixes size ignoring

5. You want a navigation menu with links side by side, each with padding and background color. Which display property should you use to allow width, height, and side-by-side layout?

hard

A. display: block;

B. display: none;

C. display: inline;

D. display: inline-block;

Solution

1. Step 1: Identify layout needs

   Links must be side by side and allow setting width, height, padding, and background color.

2. Step 2: Match display property to needs

   Inline-block allows elements to flow horizontally and respects box model properties like padding and background.

3. Step 3: Exclude other options

   Block stacks vertically; inline ignores width/height; none hides elements.

4. Final Answer:

   display: inline-block; -> Option D

5. Quick Check:

   Side by side + size = inline-block [OK]

Hint: Use inline-block for side by side with size [OK]

Common Mistakes:

• Using block which stacks vertically
• Using inline which ignores size
• Using none which hides elements