LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

CSS Inline-Block

3 minute

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?

  1. Horizontal Alignment – Place multiple elements side by side naturally.
  2. Dimension Control – Unlike inline elements, you can set width and height.
  3. Layout Flexibility – Works for menus, buttons, badges, cards, and small grids.
  4. Vertical Alignment – Can align elements relative to each other using vertical-align.
  5. 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 TypeInline?Width & Height?Notes
inlineYesNoFlows with text
blockNoYesStarts on new line
inline-blockYesYesHybrid: 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>


Article 0 of 0