Understanding block, inline, and inline-block in CSS (with Live Demos)
Ever wondered why some elements sit side by side while others push everything to the next line? It all comes down to the CSS display property. In this post, we’ll demystify the most common display values: block, inline, and inline-block.
We’ll walk through each one, show real code examples, and even include a live demo you can inspect right inside this article.
See It in Action
Explore how block, inline, and inline-block elements behave in the live demo below. Try resizing the window or inspecting the elements to see the differences in real time.
What Is the display Property?
In CSS, the display property determines how an element is rendered in the layout — whether it starts on a new line, how it sizes itself, and whether it allows other elements beside it.
Quick Comparison Table
| Property | block | inline-block | inline |
|---|---|---|---|
| Layout | Starts on a new line | Flows with content | Flows with content |
| Width/Height | Can be set | Can be set | Cannot be set |
| Vertical Align | ❌ Not applicable | ✅ Yes | ✅ Yes |
| Respects Padding/Margin | ✅ All sides | ✅ All sides | 🚫 Vertical padding/margin ignored in layout |
| Use Cases | <div>, <section>, <p> | <button>, <img>, form inputs | <a>, <span>, <b>, <i> |
When to Use Each
block
Use when you want elements to stack vertically and take up full width.
- ✅ Great for layout containers, sections, articles
- ✅ Can control width, height, margins, padding
<div class="block">Block element</div>inline
Use when you’re styling small pieces of content like text or icons inline.
- ✅ Best for wrapping small chunks of text (like links)
- 🚫 Can’t set width or height
<span class="inline">Inline element</span>inline-block
Use when you want elements to sit next to each other but still control their size.
- ✅ Useful for buttons, inputs, or nav items that sit inline
- ✅ Allows width/height and padding/margin
<div class="inline-block">Inline-block element</div>Pro Tip: Combine With Flex or Grid for Layouts
While block, inline, and inline-block are foundational, most modern layouts rely on display: flex or display: grid. Still, understanding these three helps you debug and build small UI components confidently.
Final Thoughts
Understanding how elements flow in CSS is key to building consistent and responsive layouts. The differences between block, inline, and inline-block may seem small—but they have a big impact on how your interface behaves.
Next time you’re styling a button, wrapping a link, or building a card component, you’ll know exactly which display value to reach for.