Bird
Raised Fist0
CSSmarkup~30 mins

Block vs inline vs inline-block in CSS - Hands-On Comparison

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Understanding Block, Inline, and Inline-Block Elements with CSS
📖 Scenario: You are creating a simple webpage to learn how different CSS display properties affect the layout of elements. You want to see how block, inline, and inline-block elements behave visually.
🎯 Goal: Build a webpage with three colored boxes labeled 'Block', 'Inline', and 'Inline-Block'. Each box uses the corresponding CSS display property so you can observe how they appear and flow on the page.
📋 What You'll Learn
Create three <div> elements with text 'Block', 'Inline', and 'Inline-Block'.
Add CSS rules to set the display property of each div to block, inline, and inline-block respectively.
Give each box a distinct background color and fixed width and height so differences are visible.
Ensure the page uses semantic HTML5 structure and is responsive.
Include accessible labels and good color contrast.
💡 Why This Matters
🌍 Real World
Understanding how block, inline, and inline-block elements behave helps you build layouts that look good and work well on all devices.
💼 Career
Web developers must control element layout precisely. Knowing display types is essential for creating accessible and responsive websites.
Progress0 / 4 steps
1
Create the HTML structure with three <div> elements
Create a basic HTML5 page with a <main> section containing three <div> elements. Each div should have the exact text: Block, Inline, and Inline-Block respectively.
CSS
Hint

Remember to put the three <div> elements inside the <main> tag with the exact text content.

2
Add CSS styles for colors and sizes
Inside a <style> tag in the <head>, add CSS rules to style all three div elements with a width of 8rem, height of 4rem, white text color, and distinct background colors: blue for the first, green for the second, and orange for the third.
CSS
Hint

Use the div:nth-child() selector to assign different background colors to each box.

3
Set the display property for each box
Add CSS rules to set the display property of the first div to block, the second div to inline, and the third div to inline-block. Use the div:nth-child() selectors to target each one.
CSS
Hint

Use display: block;, display: inline;, and display: inline-block; for the first, second, and third div respectively.

4
Add spacing and semantic improvements
Add CSS to give each div a margin of 0.5rem to separate them visually. Also, add an aria-label attribute to each div with the exact values: Block box, Inline box, and Inline-Block box respectively for accessibility.
CSS
Hint

Use the margin property to add space around each box. Add the aria-label attribute inside each div tag for accessibility.

Practice

(1/5)
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