The Complete CSS Display Inline-Block Interactive Tutorial

Table of Contents

What inline-block is (and why it exists)

The display: inline-block value is basically CSS saying: “Behave like text (inline), but keep your box-model powers (block).”

An inline element (display: inline) flows within a line of text, but ignores width/height in the way you’d hope. A block element (display: block) can have width/height, but it starts on a new line and takes the whole row by default.

Inline-block is the compromise: it sits in a line with siblings (like inline), but you can set width, height, padding, and margin (like block).

Inline vs block vs inline-block (quick comparison)

inline: flows in text, ignores width/height (mostly), margins work horizontally, vertical spacing is tricky
block: starts on a new line, can size itself, easy layout building block
inline-block: flows inline, can size itself, aligns like text (baseline by default)

.demo-inline {
  display: inline;
}

.demo-block {
display: block;
}

.demo-inline-block {
display: inline-block;
}

.demo-inline {
  display: inline;
  width: 220px;
  height: 60px;
}

.demo-block {
  display: block;
  width: 220px;
  height: 60px;
}

.demo-inline-block {
  display: inline-block;
  width: 220px;
  height: 60px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.2;
  padding: 12px;
  border: 2px dashed #999;
}

.badge {
  background: #f2f2f2;
  border: 2px solid #111;
  padding: 10px;
  margin: 8px 8px 8px 0;
}

.note {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 10px;
}


  Inline
  Block
  Inline-block

  
    Activate the second snippet: notice how inline ignores width/height,
    while inline-block respects them without forcing a new line like block.

Your first inline-block layout (cards in a row)

Inline-block is great for simple “items in a row” layouts, especially when you want each item to keep a fixed width and still wrap to the next line when space runs out.

.card {
  display: inline-block;
  width: 160px;
}

.card {
  display: inline-block;
  width: 160px;
  vertical-align: top;
}

.card {
  display: inline-block;
  width: 160px;
  vertical-align: top;
  margin: 10px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.gridish {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.card {
  border: 2px solid #111;
  background: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
}

.card h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}


  
    Card A
    Short text.
  
  
    Card B
    More text here so it becomes taller than Card A.
  
  
    Card C
    Also short.

In the second snippet, we add vertical-align: top to stop the default baseline alignment from making the tops look “uneven.”

The “mystery gap” between inline-block elements

Inline-block elements are treated like text. That means the spaces/newlines in your HTML count as actual whitespace between the elements.

So this: <div class="item"></div>␠<div class="item"></div> creates a visible gap.

.item {
  display: inline-block;
  width: 120px;
}

.container {
  font-size: 0;
}

.item {
  display: inline-block;
  width: 120px;
  font-size: 16px;
}

.item {
  display: inline-block;
  width: 120px;
  margin-right: -4px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.container {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.item {
  border: 2px solid #111;
  background: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0;
  text-align: center;
}


  One
  Two
  Three

Gap fix options (and when to use them)

Font-size: 0 on the parent: very common. Then re-enable a normal font-size on children.
Negative margin trick (like margin-right: -4px): can work, but is a bit “magic-number-ish.”
Remove whitespace in HTML: works, but can make markup uglier.

Vertical alignment: top / middle / bottom (and why “middle” isn’t always “center”)

Inline-block elements align like text on a line. The default is baseline alignment, which often looks like the items “sink” a bit.

Use vertical-align on the inline-block elements: top, middle, bottom, or baseline.

.box {
  display: inline-block;
  width: 140px;
  height: 80px;
  vertical-align: baseline;
}

.box {
  display: inline-block;
  width: 140px;
  height: 80px;
  vertical-align: top;
}

.box {
  display: inline-block;
  width: 140px;
  height: 80px;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 140px;
  height: 80px;
  vertical-align: bottom;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.row {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.box {
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
}

.box.tall {
  height: 130px;
}

.box strong {
  display: block;
  margin-bottom: 6px;
}


  
    Short
    80px tall
  
  
    Tall
    130px tall
  
  
    Short
    80px tall

“Inline-block vertical align center” (what people usually mean)

People often say “center vertically,” but with inline-block they usually mean one of two things:

Center the boxes relative to each other on the line: use vertical-align: middle on the inline-block elements.
Center text inside each box: use line-height (single line) or layout methods like flex/grid (multi-line).

Learn more about vertical-align in the CSS Vertical Align Interactive Tutorial.

Horizontal alignment: left / center / right (with text-align)

Because inline-block items behave like text on a line, the parent’s text-align controls how the items line up.

text-align: left center right

.parent {
  text-align: left;
}

.chip {
  display: inline-block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
  overflow: hidden;
  resize: horizontal;
}

.chip {
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 999px;
  padding: 10px 12px;
  margin: 8px;
  font-size: 14px;
}


  Alpha
  Beta
  Gamma

CSS display inline-block center (two common meanings)

Center the whole group of inline-block items

This is the most common “inline-block center” request. You do it by centering the line: set text-align: center on the parent, and keep the children as inline-block.

.parent {
  text-align: center;
}

.card {
display: inline-block;
width: 160px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.card {
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: left;
}

.card h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}


  
    Centered group
    The cards are centered as a group.
  
  
    Still wraps
    Resize the preview and they wrap naturally.

Center content inside each inline-block

This is different: you want the text (or icon) inside the inline-block to be centered. That’s just text-align: center on the inline-block element itself.

.badge {
  display: inline-block;
  width: 180px;
  text-align: center;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.badge {
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 999px;
  padding: 12px 14px;
  margin: 10px;
}


  Centered inside
  Also centered

CSS display inline-block space between (realistic options)

Inline-block does not have a built-in “space-between” feature like flexbox. But you can get similar effects depending on what you’re building.

Option 1: the justify trick (best when you want full-row spread)

This uses text-align: justify on the parent so the browser spreads inline content across the row. You then add a “fake” full-width element at the end to force justification.

.parent {
  text-align: justify;
}

.item {
display: inline-block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.item {
  width: 120px;
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
  text-align: center;
}

.justify-spacer {
  display: inline-block;
  width: 100%;
  height: 0;
}


  One
  Two
  Three

Tradeoff: this spreads items across the line, but the behavior can feel “text-like” (because it is). For many layouts, flexbox is simpler.

Learn more about flexbox in the CSS Flexbox Interactive Tutorial.

Option 2: control spacing with margins (simple and predictable)

If “space between” simply means “give them breathing room,” use margins.

.item {
  display: inline-block;
  margin: 0 14px 14px 0;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.item {
  width: 120px;
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}


  One
  Two
  Three

Align top / right / center with inline-block (what that actually means)

Align top

For inline-block siblings of different heights, “align top” means: set vertical-align: top on the inline-block elements.

Align right

“Align right” usually means push the whole row to the right. Do that with text-align: right on the parent.

Align center

“Align center” usually means center the whole row: text-align: center on the parent.

Horizontal align (parent text-align): left center right

.parent {
  text-align: left;
}

.item {
  display: inline-block;
  vertical-align: top;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.item {
  width: 140px;
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: left;
}

.item p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
}


  
    Short
    One line.
  
  
    Tall
    More text here to make this item taller than the first one.

CSS display inline-block horizontal align center

If you mean “center the inline-block elements horizontally,” you want: text-align: center on the parent.

If it doesn’t work, check if the parent is actually the one wrapping the items.
Also check if a more specific rule is overriding text-align.

CSS display inline-block not working (debug checklist)

When inline-block “doesn’t work,” it’s usually one of these:

Issue 1: You put inline-block on the parent instead of the items

Inline-block is usually applied to the children you want to sit on one line.
The parent stays a normal block container in most cases.

Issue 2: Width/height seems ignored

Width/height are ignored on display: inline. Make sure the element is really inline-block (and not being overridden).

Issue 3: The gap between items is driving you mad

That’s the whitespace gap. Use one of the fixes you saw earlier (parent font-size: 0 is the classic).

Issue 4: vertical-align: middle does not look “centered”

vertical-align: middle aligns to the line box’s “middle,” which can feel odd if font sizes differ. For true vertical centering inside a box, inline-block is not the best tool.

Issue 5: You are trying to “space-between” like flexbox

Inline-block can fake it, but it’s not built for it. If your layout goal is “distribute items evenly,” flexbox is usually the clean solution.

Issue 6: The items wrap when you wanted one line

Inline-block wraps naturally when there isn’t enough space.
If you want to prevent wrapping, you can use white-space: nowrap on the parent (but be careful: it can overflow).

.parent {
  white-space: nowrap;
  overflow: auto;
}

.item {
display: inline-block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.parent {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 12px;
  border: 2px dashed #999;
}

.item {
  width: 140px;
  border: 2px solid #111;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  text-align: center;
}


  One
  Two
  Three
  Four

Learn more about overflow in the CSS Overflow Interactive Tutorial.

When inline-block is a good choice

Simple “row of items” that can wrap naturally
Small UI pieces (badges, pills, small cards) where you want text-like alignment behavior
Quick layouts where you don’t need advanced distribution or equal-height rows

When to use Flexbox or Grid instead

If your goal includes things like space-between, true vertical centering, equal heights, reordering, or complex responsiveness, inline-block becomes a “clever trick museum.”

Use flexbox for one-dimensional layouts (rows or columns)
Use grid for two-dimensional layouts (rows and columns together)

Learn more about grid in the CSS Grid Interactive Tutorial.

Inline-block cheat sheet

Make items sit on one line: .item { display: inline-block; }
Control vertical alignment between items: vertical-align: top | middle | bottom;
Center items horizontally as a group: .parent { text-align: center; }
Right-align items as a group: .parent { text-align: right; }
Remove the whitespace gap: .parent { font-size: 0; } .item { font-size: 16px; }
Prevent wrapping (careful!): .parent { white-space: nowrap; overflow: auto; }

Final thoughts

Inline-block is a classic. It’s not the newest tool in the shed, but it’s still useful. Just remember the big idea: inline-block aligns like text. Once you treat it like “text with a box model,” the weird parts (gaps, vertical-align, text-align) suddenly make sense.

Share:

Leave the first comment (Cancel Reply)

You must be logged in to post a comment.