block vs inline vs inline-block in CSS - When to Use Each

Previous Next

After understanding the display property, you must clearly distinguish the three most common types: block, inline, and inline-block.

If you are looking for the difference between block and inline, when to use inline-block, or why width does not work on a span, this lesson answers it directly.

block vs inline vs inline-block in CSS

Behavior	block	inline	inline-block
Starts on a new line?	Yes	No	No
Accepts width/height?	Yes	Mostly no	Yes
Takes full line width?	Usually yes	No	No
Good for cards/buttons?	Yes	Limited	Very good

display: block in CSS

Block elements like div, p, and h1 start on a new line and take wide horizontal space.

.item {
    display: block;
    width: 180px;
    padding: 8px;
}

What does this code do? It makes each item sit on its own line with a fixed width.

Expected result: elements stack vertically.

Common mistake: expecting block elements to sit side-by-side by default.

Result in the browser:

Block 1 Block 2

display: inline in CSS

Inline elements like span and a sit next to each other on the same line. They do not respect width/height like block elements.

.item {
    display: inline;
    width: 180px;   /* usually does not work as expected */
    height: 60px;   /* usually does not work as expected */
}

What does this code do? It keeps elements inline, often ignoring fixed dimensions.

Expected result: text-like flow rather than box-like behavior.

Common mistake: using inline and wondering why width does not apply.

Result in the browser:

Inline 1 Inline 2 Inline 3

display: inline-block in CSS (The Hybrid Solution)

inline-block combines the best of both: it stays on the same line like inline, but accepts width/height like block.

.card {
    display: inline-block;
    width: 120px;
    height: 90px;
    margin: 6px;
    padding: 8px;
}

What does this code do? It creates boxes that sit next to each other with fixed sizes.

Line by line:

inline-block: horizontal flow with full size control.
width/height: unify card sizes.
margin/padding: natural inner and outer spacing.

Expected result: a simple grid layout before Flexbox.

Common mistake: forgetting that HTML whitespace can create small gaps between inline-block elements.

Result in the browser:

Box 1

Box 2

Box 3

When to Use block vs inline vs inline-block

block: large sections like cards, sections, headers.
inline: inline text elements like links and words.
inline-block: small adjacent elements with clear dimensions (buttons/simple lists).

Practical tip: modern row/column layouts are mostly done with Flexbox and Grid, but understanding inline-block is still essential.

Common Mistakes with Display Types in CSS

1) Applying width on inline: the result is usually unexpected.

2) Using block for items you want side-by-side: they stack vertically.

3) Forgetting whitespace between inline-block elements: can introduce small gaps.

FAQ - Common Search Questions

What is the difference between block and inline in CSS?

Block starts on a new line and accepts dimensions, inline stays in the line and ignores fixed sizes.

When should I use inline-block in CSS?

When you want elements side-by-side with control over width/height.

Why does width not work on a span in CSS?

Because span is inline by default; use display: inline-block or block.

Is inline-block outdated?

It is not outdated, but it is less used for complex layouts compared to Flexbox and Grid.

How do I keep elements on the same line and still set dimensions?

Use display: inline-block or Flexbox depending on the layout.

Try it now: create three elements and switch their display between block, inline, and inline-block to compare the behavior.

Great job! You now understand the core display types in CSS. In the next lesson we will learn position to place elements precisely on the page.

Previous Next

DevArabi

CSS Course

block vs inline vs inline-block in CSS - When to Use Each