CSS Inline-block

Imagine building a toy train track. If you use standard block elements, each piece behaves like a heavy cargo box—it always demands a brand-new line and stacks vertically. If you use standard inline elements, they behave like flat stickers—they sit side-by-side on the same line, but you cannot adjust their thickness, width, or height. CSS inline-block is the hybrid solution. It behaves like a sticker that sits side-by-side with other text, but allows you to customize its exact width, height, margins, and padding like a heavy cargo box.

In this page:

Understanding display: inline-block
Building Navigation Menus
Handling the HTML Whitespace Gap
Vertical Alignment Options
Inline-block vs. Flexbox

Understanding display: inline-block

The inline-block value combines properties of both inline and block elements. It allows elements to sit side-by-side on the same line like inline elements, while still respecting width, height, margin, and padding settings like block elements.

Note: Use inline-block to style clickable navigation links, buttons, or card structures cleanly.

Warning: Browsers automatically add a tiny, default horizontal space (about 4px) between inline-block elements due to spaces in your HTML code.

Example: Understanding display: inline-block

css

<style>
span {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: lightblue;
}
</style>
<span>A</span><span>B</span>

Building Navigation Menus

Because inline-block elements sit side-by-side while respecting width and padding, they are the perfect display values for structuring clean, horizontal website navigation menus out of standard list items.

Note: Apply inline-block to your navigation list items to align them horizontally in a menu bar.

Warning: Make sure your navigation list containers have standard bullet styles disabled.

Example: Building Navigation Menus

css

<style>
li {
  display: inline-block;
  background: lightblue;
  padding: 6px 10px;
  margin-right: 4px;
}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Handling the HTML Whitespace Gap

When you write inline-block elements in your HTML code on separate lines, browsers automatically render a tiny whitespace gap (about 4px) between them. This gap can break grids that depend on precise percentage widths (like two 50% columns).

Note: Remove the whitespace gap by writing your closing and opening HTML tags next to each other on the same line, or by setting font-size: 0 on the parent container.

Warning: Setting font-size: 0 on the parent requires you to redefine font-size on all nested child elements to make text visible.

Example: Handling the HTML Whitespace Gap

css

<style>
span {
  display: inline-block;
  width: 100px;
  background: lightgreen;
}
</style>
<span>A</span
><span>B</span>

Vertical Alignment Options

Because inline-block elements sit inline with other text elements, they can align vertically in different ways. You can use the vertical-align property (top, middle, or bottom) to control how they align relative to surrounding text.

Note: Use vertical-align: middle to align icon images and text labels side-by-side cleanly.

Warning: By default, inline-block elements align to the baseline, which can make them look slightly offset.

Example: Vertical Alignment Options

css

<style>
span {
  display: inline-block;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}
</style>
<img src="https://placehold.co/20x20" alt="icon"> <span>Label aligned to the middle</span>

Inline-block vs. Flexbox

Before Flexbox was introduced, developers used inline-block elements to build flexible layouts. While inline-block is still highly useful for styling links and buttons, using Flexbox is much better for building responsive multi-column layouts.

Note: Use Flexbox for building multi-column layouts, and save inline-block for small, text-wrapping controls.

Warning: Using inline-block to build complex, responsive grids is tedious and prone to layout-breaking errors.

Example: Inline-block vs. Flexbox

css

<style>
.old-way li {
  display: inline-block;
  background: lightblue;
  padding: 6px 10px;
}
.modern-way {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.modern-way div {
  background: lightgreen;
  padding: 6px 10px;
}
</style>
<ul class="old-way"><li>Link</li></ul>
<div class="modern-way"><div>Column</div></div>

Common Mistakes

Applying layout width and height settings to standard inline elements, which is ignored by browsers.
Omitting whitespace gap collapsing techniques on percentage-based inline-block grids, causing layout overflow.
Using inline-block to build complex, responsive grids instead of modern Flexbox or Grid.

Chapter Summary

The inline-block value allows elements to sit side-by-side like inline elements while respecting width, height, padding, and margins like block elements.
Inline-block elements are perfect for styling horizontal navigation menus, inline buttons, and list links.
Collapse the HTML code whitespace gap or set font-size: 0 on the parent container to prevent default spacing overflow on inline-block grids.

Browser Support

The display: inline-block property and vertical-align properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Float Next Lesson → CSS Align