Bird
Raised Fist0
Tailwindmarkup~5 mins

Block, inline, and inline-block in Tailwind

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
Introduction

These display styles control how elements sit and flow on a webpage. They help you arrange content clearly and nicely.

When you want an element to take up the full width and start on a new line (like paragraphs).
When you want elements to flow side by side without forcing a new line (like links in a sentence).
When you want elements to flow side by side but still behave like blocks (so you can set width and height).
Syntax
Tailwind
block
inline
inline-block

In Tailwind CSS, use block, inline, and inline-block classes to set these display types.

These classes control how elements behave in layout and spacing.

Examples
This element takes full width and starts on a new line.
Tailwind
<div class="block">Block element</div>
This element flows inside text without breaking the line.
Tailwind
<span class="inline">Inline element</span>
This element flows inline but you can set width and height.
Tailwind
<div class="inline-block">Inline-block element</div>
Sample Program

This example shows three elements with different display styles using Tailwind classes:

  • The blue block paragraph takes full width and starts on a new line.
  • The green inline span flows inside text without breaking the line.
  • The red and yellow inline-block divs sit side by side and have fixed width and height.
Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Block, Inline, Inline-block Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <p class="block bg-blue-200 p-2 mb-2">This is a block element. It takes full width and starts on a new line.</p>
  <p>
    This is some text with an <span class="inline bg-green-200">inline element</span> inside it.
    The inline element does not break the line.
  </p>
  <div class="inline-block bg-red-200 p-2 mt-4" style="width: 150px; height: 50px;">
    Inline-block element with set width and height.
  </div>
  <div class="inline-block bg-yellow-200 p-2 ml-2" style="width: 150px; height: 50px;">
    Another inline-block next to it.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Block elements always start on a new line and stretch to fill the container width.

Inline elements flow inside text and ignore width and height settings.

Inline-block elements flow inline but respect width and height, letting you size them.

Summary

Block elements break lines and fill width.

Inline elements flow inside text without line breaks.

Inline-block elements flow inline but can have size.

Practice

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