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>