CSS Inline-block
display: inline-block lets an element flow in a line with its neighbors while still accepting width, height, and vertical margins.
Every element defaults to either block or inline behavior. Block elements stack vertically and fill the available width; inline elements sit in a line but ignore width and height. inline-block is a hybrid that gives you the best of both.
How the three display modes compare
Building a row of chips
Sized boxes that sit in a row
<!DOCTYPE html>
<html>
<head>
<style>
.chip {
display: inline-block;
width: 90px;
padding: 6px 12px;
text-align: center;
background: #eef;
}
</style>
</head>
<body>
<span class="chip">CSS</span>
<span class="chip">HTML</span>
<span class="chip">JS</span>
</body>
</html>Because the chips are inline-block, they line up horizontally like words in a sentence, yet each one honours its own width and padding, which a plain inline element would ignore.
The whitespace gap
Because inline-block elements are laid out like text, any spaces or line breaks between them in the HTML render as a small gap. This surprises many beginners who expect the boxes to touch.
A simple horizontal menu
<!DOCTYPE html>
<html>
<head>
<style>
nav a {
display: inline-block;
padding: 10px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Exercise: CSS Inline-block
What can inline-block elements do that plain inline elements cannot?
