CSS Inline-block

CSS Layout: display: inline-block

Understand how display: inline-block works and its role in layout, alongside more modern techniques.

The inline-block Value

Setting an element’s display property to inline-block gives it characteristics of both inline and block elements:

• Like inline elements (<span>, <a>, <img>), it flows with the surrounding text and doesn’t force line breaks before or after it.
• Like block elements (<div>, <p>, <h1>), you can set its width, height, margin (top and bottom), and padding.

This makes inline-block useful for placing block-like items side-by-side without resorting to older techniques like floats.

Common Use Case: Creating horizontal navigation menus or grids of items where each item needs specific dimensions but should sit next to others.

Example: Styling list items as inline blocks for a horizontal menu:

.nav-list li {
  display: inline-block;
  margin-right: 15px; /* Space between items */
  padding: 10px 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* Remove margin from the last item */
.nav-list li:last-child {
  margin-right: 0;
}

Potential Issue: Whitespace in HTML between inline-block elements can create visual gaps. Setting font-size: 0 on the parent and resetting it on the children, or using HTML comments <!-- --> between elements, are common workarounds, though they can feel like hacks.

Comparison with Older Techniques (Floats)

Previously, achieving side-by-side layouts often involved using the float property (float: left; or float: right;). While powerful, floats introduce complexities, primarily the need to ‘clear’ the float afterwards to prevent subsequent elements from wrapping around the floated items incorrectly. This often required extra HTML elements or CSS ‘clearfix’ hacks.

/* Old way using float (requires clearing) */
.box-float {
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #8AC007;
}

.clear {
  clear: both; /* Necessary to contain floats */
}

/* Using inline-block (simpler, no clearing needed) */
.box-inline-block {
  display: inline-block;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #8AC007;
  vertical-align: top; /* Often needed to align tops */
}

inline-block simplifies this by keeping elements within the normal document flow, eliminating the need for clearing floats.

Modern Layout Techniques: Flexbox & Grid

While inline-block is useful for certain components, CSS Flexbox and CSS Grid are the modern standards for creating robust and complex page layouts.

• Flexbox (display: flex): Excels at arranging items in one dimension (either a row or a column), providing powerful alignment and distribution capabilities. Ideal for navigation bars, component layouts, and centering content.
• Grid (display: grid): Designed for two-dimensional layouts (rows and columns simultaneously). Perfect for overall page structure, aligning items into a grid system, and creating complex, overlapping layouts.

These modern modules offer more control, flexibility, and cleaner code compared to inline-block or float for most layout tasks. While learning inline-block is valuable, investing time in Flexbox and Grid is highly recommended for modern web development.

Learn More:

• MDN Flexbox Guide
• MDN Grid Guide