Block, inline, and inline-block in Tailwind - Browser Rendering Trace

Render Flow - Block, inline, and inline-block

Read HTML element

↓

Determine default display type

↓

Apply CSS display property

↓

Calculate box size and flow

↓

Render element visually

↓

Handle next element positioning

The browser reads each HTML element, decides its display type (block, inline, inline-block), calculates its size and position, then renders it visually in the flow of the page.

Render Steps - 3 Steps

Code Added:<div class="bg-blue-200 p-2">Block element</div>

Before

→

After

[Block element]
[___________]

The div is a block element by default, so it takes full width and appears on its own line with padding and background color.

🔧 Browser Action:Creates block box, calculates full width, triggers reflow

Code Sample

Three elements with different display types: block, inline, and inline-block, each with background color and padding to show their size and flow differences.

Tailwind

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

Render Quiz - 3 Questions

After step 2, how does the inline span appear relative to the block div?

A On the same line, right after the block element

B Overlapping the block element

C On a new line below the block element

D Not visible

Common Confusions - 3 Topics

Why doesn't padding add space above and below inline elements?

Inline elements only add horizontal padding visually; vertical padding doesn't push other lines because inline boxes flow within text lines (see step 2).

💡 Vertical padding/margin on inline elements affects background but not layout spacing.

Why does inline-block let me set width but inline doesn't?

Inline-block creates a box that respects width and height, unlike inline which sizes only by content (see step 3).

💡 Use inline-block when you want inline flow but control over box size.

Why does block element always start on a new line?

Block elements take full width by default, so the next element must go below (see step 1).

💡 Block = new line; inline and inline-block = flow inline.

Property Reference

Property	Value	Visual Behavior	Common Use
display	block	Takes full width, starts on new line	Containers, sections
display	inline	Flows with text, width based on content, no vertical margin/padding effect	Text, links, small elements
display	inline-block	Flows inline but respects width/height and vertical padding/margin	Buttons, images, inline containers

Concept Snapshot

Block elements take full width and start on new lines. Inline elements flow with text and size by content. Inline-block flows inline but respects width and height. Use block for sections, inline for text, inline-block for inline boxes with size. Vertical padding affects block and inline-block but not inline layout spacing.

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