Block vs inline vs inline-block in CSS - Browser Rendering Compared

Render Flow - Block vs inline vs inline-block

Parse CSS

→Match selectors

↓

Parse CSS

→Match selectors

↓

Parse CSS

→Match selectors

The browser reads CSS and applies the display property to elements, which changes how they are sized and arranged visually on the page.

Render Steps - 4 Steps

Code Added:<div class="block">Block</div>

Before

→

After

[Block (full width)]

A block element takes full width and starts on a new line, stacking vertically.

🔧 Browser Action:Creates block formatting context and calculates full width layout.

Code Sample

Three elements styled with block, inline, and inline-block display to show their different layout behaviors.

CSS

<div class="block">Block</div>
<span class="inline">Inline</span>
<div class="inline-block">Inline-Block</div>

CSS

.block {
  display: block;
  width: 10rem;
  background: lightblue;
  margin-bottom: 1rem;
}
.inline {
  display: inline;
  background: lightgreen;
  margin-right: 1rem;
}
.inline-block {
  display: inline-block;
  width: 10rem;
  background: lightcoral;
}

Render Quiz - 3 Questions

After applying step 2, how does the inline element behave visually?

A It flows inside the line with other inline elements

B It breaks the line before and after

C It takes full width and starts on a new line

D It ignores content size and fills container

Common Confusions - 3 Topics

Why can't I set width or height on an inline element?

Inline elements ignore width and height because they flow inside text lines and size to content. Use inline-block or block to control size.

💡 If you want to control size but keep inline flow, use inline-block.

Why does my block element always start on a new line?

Block elements always break lines before and after, stacking vertically. This is their default behavior.

💡 Block = new line before and after.

Why does inline-block let me set width but still stay on the same line?

Inline-block combines inline flow with block box sizing, so it respects width/height but does not force line breaks.

💡 Inline-block = inline flow + block sizing.

Property Reference

Property	Value	Visual Behavior	Width/Height Allowed	Line Break Behavior
display	block	Takes full width, starts on new line	Yes	Always breaks line before and after
display	inline	Flows inside text line, width/height ignored	No	Does not break line
display	inline-block	Flows inline but respects width/height	Yes	Does not break line

Concept Snapshot

display:block: full width, new line, width/height allowed display:inline: flows inside text, no width/height control display:inline-block: inline flow + block sizing Use inline-block to size inline elements Block elements stack vertically Inline elements flow horizontally inside lines