Block, inline, and inline-block in Tailwind - Mini Project: Build & Apply

Understanding Block, Inline, and Inline-Block with Tailwind CSS

📖 Scenario: You are creating a simple webpage to display three boxes with different display styles. This will help you see how block, inline, and inline-block elements behave visually.

🎯 Goal: Build a webpage with three colored boxes labeled Block, Inline, and Inline-Block. Use Tailwind CSS classes to set their display styles accordingly and observe how they appear side by side or stacked.

📋 What You'll Learn

Create three <div> elements with text: 'Block', 'Inline', and 'Inline-Block'.

Use Tailwind CSS classes to make the first box display as block.

Use Tailwind CSS classes to make the second box display as inline.

Use Tailwind CSS classes to make the third box display as inline-block.

Add background colors and padding so the boxes are clearly visible.

Ensure the page uses semantic HTML and is responsive.

💡 Why This Matters

🌍 Real World

Understanding how block, inline, and inline-block elements behave is essential for building clean, responsive web layouts.

💼 Career

Web developers often use these display styles to control how elements appear and interact on a page, making this knowledge fundamental for front-end development.

1

Create the HTML structure with three boxes

Create a basic HTML5 skeleton with a <main> element containing three <div> elements. Each <div> should have the text: Block, Inline, and Inline-Block respectively.

Tailwind

    
    
    Display Types



    

Hint

Remember to create three <div> elements inside the <main> tag with the exact texts.

2

Add Tailwind CSS classes for background and padding

Add Tailwind CSS classes to each <div> to give them distinct background colors and padding. Use bg-red-400 for the first, bg-green-400 for the second, and bg-blue-400 for the third. Also add p-4 for padding to all three.

Tailwind

    
    
    Display Types



    

Hint

Use the exact Tailwind classes bg-red-400 p-4, bg-green-400 p-4, and bg-blue-400 p-4 on the three divs respectively.

3

Set display styles using Tailwind CSS classes

Add Tailwind CSS display classes to the three <div> elements. Use block for the first, inline for the second, and inline-block for the third.

Tailwind

    
    
    Display Types



    

Hint

Use the Tailwind classes block, inline, and inline-block exactly on the three divs.

4

Add semantic and accessibility improvements

Add an aria-label attribute to the <main> element with the value Display type examples. Also add a role="region" attribute to <main> for accessibility.

Tailwind

    
    
    Display Types



    
    Block
    Inline
    Inline-Block

Hint

Add role="region" and aria-label="Display type examples" exactly to the <main> tag.

Practice

1. Which Tailwind class makes an element behave like a block element that breaks the line and fills the container width?

easy

A. block

B. inline

C. inline-block

D. flex

Solution

1. Step 1: Understand block element behavior

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

2. Step 2: Match Tailwind class to behavior

   The Tailwind class block applies this behavior.

3. Final Answer:

   block -> Option A

4. Quick Check:

   Block = block [OK]

Hint: Block elements use block class in Tailwind [OK]

Common Mistakes:

• Confusing inline with block behavior
• Using inline-block which does not break line
• Choosing flex which is for flexbox layout

2. Which Tailwind class correctly applies inline-block display to an element?

easy

A. inline-block

B. hidden

C. block

D. inline

Solution

1. Step 1: Recall Tailwind display classes

   inline-block is the class that sets display to inline-block.

2. Step 2: Confirm class matches inline-block behavior

   Inline-block elements flow inline but can have width and height.

3. Final Answer:

   inline-block -> Option A

4. Quick Check:

   Inline-block = inline-block [OK]

Hint: Use inline-block class for inline-block display [OK]

Common Mistakes:

• Using inline which lacks block sizing
• Choosing block which breaks line
• Selecting hidden which hides element

3. What will be the visual layout of these two elements with Tailwind classes?

<div class="block bg-blue-300 p-2">Block</div>
<span class="inline bg-red-300 p-2">Inline</span>

medium

A. Red inline element breaks line and appears below block

B. Both elements appear on the same line side by side

C. Both elements hidden due to conflicting classes

D. Block element on its own line, red inline text flows next to it

Solution

1. Step 1: Understand block element behavior

   The div with block class breaks line and fills width.

2. Step 2: Understand inline element behavior

   The span with inline class flows inline, so it appears next to following text if space allows.

3. Final Answer:

   Block element on its own line, red inline text flows next to it -> Option D

4. Quick Check:

   Block breaks line, inline flows inline [OK]

Hint: Block breaks line; inline stays inline [OK]

Common Mistakes:

• Thinking inline breaks line like block
• Assuming both appear side by side
• Confusing element types and classes

4. You want an element to flow inline but also set width and height. Which Tailwind class is incorrectly used here?

<div class="inline w-32 h-16 bg-green-300">Box</div>

medium

A. w-32 is invalid for inline elements

B. inline is incorrect because width and height won't apply properly

C. h-16 causes syntax error with inline

D. bg-green-300 hides the element

Solution

1. Step 1: Understand inline element sizing

   Inline elements ignore width and height properties.

2. Step 2: Identify class causing issue

   The inline class causes the element to behave inline, so width and height won't apply.

3. Final Answer:

   inline is incorrect because width and height won't apply properly -> Option B

4. Quick Check:

   Inline ignores width/height [OK]

Hint: Inline ignores width/height; use inline-block instead [OK]

Common Mistakes:

• Thinking width/height work on inline
• Blaming width or height classes
• Confusing background color with visibility

5. You want two buttons side by side with padding and fixed size, but they should not break lines. Which Tailwind classes combination is best?

<button class="?">Btn 1</button>
<button class="?">Btn 2</button>

hard

A. inline w-24 h-10 p-2 bg-blue-500 text-white

B. block w-24 h-10 p-2 bg-blue-500 text-white

C. inline-block w-24 h-10 p-2 bg-blue-500 text-white

D. hidden w-24 h-10 p-2 bg-blue-500 text-white

Solution

1. Step 1: Identify display needed for side-by-side buttons

   Buttons should flow inline but keep size and padding, so inline-block is needed.

2. Step 2: Check other classes for size and style

   w-24 and h-10 set fixed size, p-2 adds padding, and colors style the buttons.

3. Final Answer:

   inline-block w-24 h-10 p-2 bg-blue-500 text-white -> Option C

4. Quick Check:

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

Hint: Use inline-block for sized inline elements [OK]

Common Mistakes:

• Using block breaks buttons into separate lines
• Using inline ignores width and height
• Using hidden hides buttons