Written by Rahul · Frontend Engineer at Google · Updated 2025
Every CSS layout problem starts here. If you don't understand block vs inline, you'll fight CSS forever. Let me break it down simply.
Block Elements
Block elements take up the full width available and start on a new line.
Block behavior:
- Takes full width of parent
- Starts on a new line
widthandheightwork ✅marginandpaddingwork in ALL directions ✅
Inline Elements
Inline elements only take up as much width as their content and flow within the text.
Inline behavior:
- Only takes width of content
- Flows in the same line as surrounding content
widthandheightare IGNORED ❌- Vertical
marginis IGNORED ❌ - Vertical
paddingworks visually but doesn't push other elements
Inline-Block — The Best of Both
inline-block flows like inline but behaves like block for sizing. Perfect for tags, badges, and buttons.
The Classic Bugs
Bug 1: Why Won't My Span Take Width?
Bug 2: The Mysterious Gap Between Inline-Block Elements
Bug 3: Vertical Margin Collapse on Blocks
Modern Alternatives — Flexbox and Grid
Quick Reference Table
| Property | block | inline | inline-block |
|---|---|---|---|
| New line | ✅ Yes | ❌ No | ❌ No |
| Full width | ✅ Yes | ❌ No | ❌ No |
| Width/Height | ✅ Works | ❌ Ignored | ✅ Works |
| Vertical margin | ✅ Works | ❌ Ignored | ✅ Works |
| Vertical padding | ✅ Works | ⚠️ Visual only | ✅ Works |
Best Practices
- Use Flexbox/Grid for layout — they replace most block/inline-block layout hacks
- Use
inline-blockfor small elements like tags, badges, icons - Don't set width/height on inline elements — change display first
- Remember margin collapse on block elements — use gap in Flex/Grid instead
- Use semantic HTML — browsers set the right display values for you