Block vs inline vs inline-block in CSS - Quick Revision & Key Differences

Recall & Review

beginner

What is a block-level element in CSS?

A block-level element takes up the full width available, starts on a new line, and can have width and height set. Examples include <div> and <p>.

beginner

What is an inline element in CSS?

An inline element only takes up as much width as its content, does not start on a new line, and ignores width and height properties. Examples include <span> and <a>.

intermediate

How does inline-block differ from inline and block elements?

Inline-block elements flow like inline elements (do not start on a new line) but can have width and height set like block elements.

beginner

Which CSS property controls whether an element is block, inline, or inline-block?

The 'display' property controls this. For example, 'display: block;', 'display: inline;', and 'display: inline-block;'.

intermediate

Why might you use inline-block instead of inline or block?

Use inline-block when you want elements to sit side by side but still control their size with width and height.

Which element type starts on a new line and takes full width by default?

A Inline-block

B Inline

C None of the above

D Block

Block elements start on a new line and take the full width available.

Which display value allows setting width and height but does not start on a new line?

A inline-block

B inline

C block

D none

Inline-block elements behave like inline but accept width and height.

Which of these elements is inline by default?

A &lt;span&gt;

B &lt;div&gt;

C &lt;p&gt;

D &lt;section&gt;

<span> is inline by default.

What CSS property changes an element from inline to block?

A position

B float

C display

D visibility

The 'display' property controls the element's display type.

If you want elements side by side with control over size, which display value is best?

A block

B inline-block

C flex

D inline

Inline-block lets elements sit side by side and lets you set width and height.

Explain the differences between block, inline, and inline-block elements in CSS.

Think about how elements behave in a paragraph or a row.

Describe a situation where using inline-block is better than block or inline.

Imagine buttons or boxes in a row that need specific sizes.

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