The CSS display: inline-block value combines the layout flow of inline elements with the box sizing properties of block elements, allowing elements to sit side-by-side while respecting custom width, height, padding, and margins.
block, inline, and inline-blockUnderstanding how inline-block bridges display behaviors:
.badge {
display: inline-block;
width: 140px; /* Respected */
height: 40px; /* Respected */
padding: 10px; /* Respected */
margin-right: 12px; /* Respected */
}
Display behavior matrix:
display: inline: Sits side-by-side, but ignores explicit width, height, and vertical margins.display: block: Respects all box model properties, but forces a new line.display: inline-block: Sits side-by-side AND respects all box model dimensions.flowchart TD
A["Feature Check"] --> B["inline: Side-by-side YES | Custom Width/Height NO"]
A --> C["block: Side-by-side NO | Custom Width/Height YES"]
A --> D["inline-block: Side-by-side YES | Custom Width/Height YES"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inline-Block Demonstration</title>
<style>
.feature-card {
display: inline-block;
width: 30%;
min-width: 150px;
background-color: #1e293b;
padding: 1rem;
border-radius: 6px;
text-align: center;
vertical-align: top;
margin-right: 2%;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Side-by-Side Inline-Block Cards</h2>
<div>
<div class="feature-card">
<h4>Feature 1</h4>
<p>Fast</p>
</div>
<div class="feature-card">
<h4>Feature 2</h4>
<p>Secure</p>
</div>
<div class="feature-card">
<h4>Feature 3</h4>
<p>Scalable</p>
</div>
</div>
</body>
</html>
vertical-align: top on inline-block elements: Prevents adjacent inline-block elements from misaligning vertically when text heights differ.inline-block tags render a 4px gap; remove whitespace or use Flexbox.Create a CSS class .btn-inline that sets display: inline-block;, padding: 10px 20px;, and vertical-align: middle;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.