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.