CSS Tutorial
CSS Inline-block
display: inline-block gives you the best of both worlds: elements sit next to each other on the same line like inline text, yet they still respect width, height, and vertical padding like block boxes.
What inline-block does
A plain inline element such as <span> ignores width and height, so you cannot size it as a box. A block element such as <div> accepts sizes but always starts on a new line. inline-block combines them: the element flows in a line with its neighbours but behaves like a box you can size and pad.
| display value | New line? | Width/height apply? |
|---|---|---|
| inline | No | No |
| block | Yes | Yes |
| inline-block | No | Yes |
Side-by-side cards
Because inline-block boxes sit next to each other and still accept a width, they are a simple way to lay out cards or feature columns in a row.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.card {
display: inline-block;
width: 120px;
height: 90px;
background: #2563eb;
color: white;
padding: 10px;
margin: 4px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</body>
</html>The whitespace gap
Because inline-block elements are treated like words, the spaces and line breaks between them in the HTML render as a small gap. You can remove it by setting the parent's font-size to 0 and restoring it on the children, or by using flexbox instead.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.row { font-size: 0; } /* kills the gap */
.row .box {
display: inline-block;
font-size: 16px; /* restore text size */
width: 100px;
background: #16a34a;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="row">
<span class="box">A</span>
<span class="box">B</span>
<span class="box">C</span>
</div>
</body>
</html>vertical-align: top is handy on inline-block items, because by default they align to the text baseline and boxes of different heights can look misaligned.
Key points
- inline-block flows in a line but accepts width, height, and vertical padding.
- It is a quick way to place sized boxes side by side.
- Whitespace between inline-block items creates a small visible gap.
- For robust multi-item layouts, flexbox usually beats inline-block.