CSS Layout – display: inline-block

Welcome to The Coding College! In this tutorial, we’ll explore the powerful display: inline-block property in CSS. This property combines the characteristics of both inline and block-level elements, making it a versatile tool for creating layouts.

What is display: inline-block?

The inline-block display value is a unique combination of the behaviors of inline and block elements:

  • Like inline elements, it allows multiple elements to sit side by side on the same line.
  • Like block elements, it respects width, height, padding, and margins.

This makes inline-block an excellent choice for creating layouts where you need elements to align horizontally while retaining control over their box properties.

Why Use inline-block?

The inline-block property is commonly used for:

  • Creating horizontally aligned navigation menus.
  • Aligning buttons, images, or other elements side by side.
  • Simplifying layouts without relying on floats or Flexbox.

Syntax of display: inline-block

selector {
    display: inline-block;
}

Example 1: Basic inline-block Behavior

Code Example:

<div style="display: inline-block; width: 150px; height: 100px; background-color: lightblue; margin: 10px;">Box 1</div>
<div style="display: inline-block; width: 150px; height: 100px; background-color: lightgreen; margin: 10px;">Box 2</div>
<div style="display: inline-block; width: 150px; height: 100px; background-color: lightcoral; margin: 10px;">Box 3</div>

Output:
Three boxes are displayed horizontally, each respecting its width, height, and margin.

Example 2: Navigation Menu Using inline-block

inline-block is perfect for creating horizontal navigation menus without using floats.

Code Example:

<nav style="text-align: center;">
    <a href="#" style="display: inline-block; padding: 10px 20px; background-color: #333; color: white; text-decoration: none; margin: 5px;">Home</a>
    <a href="#" style="display: inline-block; padding: 10px 20px; background-color: #555; color: white; text-decoration: none; margin: 5px;">About</a>
    <a href="#" style="display: inline-block; padding: 10px 20px; background-color: #777; color: white; text-decoration: none; margin: 5px;">Contact</a>
</nav>

Output:
A horizontally aligned navigation bar with three buttons, each styled with padding and margins.

Example 3: Image Gallery Layout

Using inline-block, you can create an image gallery layout with uniform spacing.

Code Example:

<div style="text-align: center;">
    <img src="image1.jpg" style="display: inline-block; width: 150px; height: 100px; margin: 5px;" alt="Image 1">
    <img src="image2.jpg" style="display: inline-block; width: 150px; height: 100px; margin: 5px;" alt="Image 2">
    <img src="image3.jpg" style="display: inline-block; width: 150px; height: 100px; margin: 5px;" alt="Image 3">
</div>

Output:
Images are displayed horizontally with equal spacing between them.

Example 4: Inline-Block vs Float

The inline-block layout offers advantages over floats, such as avoiding issues with parent container collapsing.

Comparison:

Float Example:

<div style="float: left; width: 100px; height: 100px; background: lightblue;">Box 1</div>
<div style="float: left; width: 100px; height: 100px; background: lightgreen;">Box 2</div>
<div style="float: left; width: 100px; height: 100px; background: lightcoral;">Box 3</div>

Problem: Parent containers might collapse due to floated children.

Inline-Block Example:

<div style="display: inline-block; width: 100px; height: 100px; background: lightblue; margin: 5px;">Box 1</div>
<div style="display: inline-block; width: 100px; height: 100px; background: lightgreen; margin: 5px;">Box 2</div>
<div style="display: inline-block; width: 100px; height: 100px; background: lightcoral; margin: 5px;">Box 3</div>

Solution: No collapsing issues, and it’s easier to align elements horizontally.

Fixing Inline-Block Whitespace Issue

One common issue with inline-block is the presence of whitespace between elements. This extra space occurs because inline-block elements are treated like inline text.

Solutions:

  1. Remove Whitespace in HTML:
<div style="display: inline-block; width: 100px; height: 100px; background: lightblue;"></div><div style="display: inline-block; width: 100px; height: 100px; background: lightgreen;"></div>
  1. Set font-size: 0; on Parent Container:
<div style="font-size: 0;">
    <div style="display: inline-block; width: 100px; height: 100px; background: lightblue;"></div>
    <div style="display: inline-block; width: 100px; height: 100px; background: lightgreen;"></div>
</div>

Advantages of inline-block

  • Simplifies horizontal alignment compared to floats.
  • Fully supports width, height, padding, and margins.
  • Avoids issues like parent container collapsing.

When to Use inline-block

  • Horizontal layouts like navigation menus or image galleries.
  • When you need control over element dimensions while keeping them inline.
  • For legacy browser support where Flexbox or Grid may not be viable.

Conclusion

The inline-block display property is a versatile tool for creating clean, horizontal layouts. While modern layout methods like Flexbox and Grid are often preferred, understanding inline-block is essential for handling older projects and specific scenarios.

Explore more CSS techniques and best practices at The Coding College.

Keep coding and building stunning layouts!

Leave a Comment