CSS Inline-Block

What is `inline-block`?

The inline-block display property is a hybrid between inline and block elements.

Like inline elements, it allows elements to sit next to each other horizontally.
Like block elements, it allows full control over width, height, margin, and padding.

This makes inline-block perfect for creating horizontal layouts without relying on floats or flexbox.

Why Use Inline-Block?

Horizontal Alignment – Place multiple elements side by side naturally.
Dimension Control – Unlike inline elements, you can set width and height.
Layout Flexibility – Works for menus, buttons, badges, cards, and small grids.
Vertical Alignment – Can align elements relative to each other using vertical-align.
Alternative to Floats – Avoids float-related issues like clearfix hacks or collapsing containers.

Syntax :

.element {
  display: inline-block;       /* Makes element inline-block */
  width: 150px;                /* Set width */
  height: 100px;               /* Set height */
  margin: 5px;                 /* Spacing between elements */
  padding: 10px;               /* Inner spacing */
  background-color: #3498db;
  color: #fff;
  text-align: center;          /* Text inside the element */
  vertical-align: top;         /* Align with other inline-block elements */
}

Examples

a) Basic Inline-Block Row

Elements sit side by side, and you can control their size, spacing, and padding.

<div style="display: inline-block; width: 100px; height: 100px; background: #3498db; margin: 5px;">Box 1</div>
<div style="display: inline-block; width: 100px; height: 100px; background: #e67e22; margin: 5px;">Box 2</div>
<div style="display: inline-block; width: 100px; height: 100px; background: #2ecc71; margin: 5px;">Box 3</div>

b) Vertical Alignment Example

Controls how inline-block elements align vertically relative to each other.

<div style="display: inline-block; width: 80px; height: 80px; background: #3498db; vertical-align: top;">Top</div>
<div style="display: inline-block; width: 80px; height: 120px; background: #e67e22; vertical-align: middle;">Middle</div>
<div style="display: inline-block; width: 80px; height: 100px; background: #2ecc71; vertical-align: bottom;">Bottom</div>

c) Fixing Whitespace Between Inline-Block Elements

Removes the extra spacing issue caused by inline-block whitespace.

<div style="font-size: 0;">
  <div style="display:inline-block; width:100px; height:50px; background:#3498db;">Box1</div>
  <div style="display:inline-block; width:100px; height:50px; background:#e67e22;">Box2</div>
</div>

Inline vs Block vs Inline-Block

Display Type	Inline?	Width & Height?	Notes
inline	Yes	No	Flows with text
block	No	Yes	Starts on new line
inline-block	Yes	Yes	Hybrid: inline flow + block dimensions

CSS Inline-Block Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Inline-Block Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.5;
      margin: 20px;
    }

    h2 {
      margin-top: 40px;
      color: #333;
    }

    /* Basic inline-block styling */
    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 5px;
      padding: 10px;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-weight: bold;
    }

    .blue { background-color: #3498db; }
    .orange { background-color: #e67e22; }
    .green { background-color: #2ecc71; }
    .purple { background-color: #9b59b6; }

    /* Vertical alignment example */
    .align-top { vertical-align: top; }
    .align-middle { vertical-align: middle; line-height: normal; padding-top: 35px; }
    .align-bottom { vertical-align: bottom; line-height: normal; padding-top: 20px; }

    /* Whitespace fix */
    .no-space { font-size: 0; }
    .no-space .box { font-size: 16px; line-height: normal; }
  </style>
</head>
<body>

  <h2>1. Basic Inline-Block Example</h2>
  <div>
    <div class="box blue">Box 1</div>
    <div class="box orange">Box 2</div>
    <div class="box green">Box 3</div>
  </div>
  <p>These boxes sit inline but maintain width, height, padding, and margin.</p>

  <h2>2. Vertical Alignment</h2>
  <div>
    <div class="box blue align-top">Top</div>
    <div class="box orange align-middle">Middle</div>
    <div class="box green align-bottom">Bottom</div>
  </div>
  <p>Use <code>vertical-align</code> to align inline-block elements relative to each other.</p>

  <h2>3. Whitespace Issue and Fix</h2>
  <div class="no-space">
    <div class="box blue">Box 1</div><div class="box orange">Box 2</div><div class="box green">Box 3</div>
  </div>
  <p>Removing spaces between elements in HTML fixes extra gaps caused by inline-block whitespace.</p>

  <h2>4. Inline-Block Inside a Parent</h2>
  <div class="purple">
    <div class="box blue">Child 1</div>
    <div class="box orange">Child 2</div>
  </div>
  <p>Inline-block works inside parent containers; children align horizontally but maintain block-level features.</p>

</body>
</html>

CSS Inline-Block

What is inline-block?

Why Use Inline-Block?

Examples

c) Fixing Whitespace Between Inline-Block Elements

Inline vs Block vs Inline-Block

Keep Reading

What is `inline-block`?