CSS Tutorial
CSS Inline-block
inline-block sits in a line like text but accepts width, height, and vertical-align.
The hybrid box
display: inline-block keeps the box in a line, like a word. Unlike inline, you can set width, height, and padding on all four sides. Harbor studio uses it for equal-width hour chips, price tags, and small cards that should wrap like text.
It is the layout people reached for before flex was everywhere. You will still meet it in older sheets and in places where wrapping like words is exactly what you want.
Width and height work
These three slips share a width. As inline boxes they could not. As blocks they would stack. As inline-block they sit in a row until the line wraps.
Example
<style>
.slip {
display: inline-block;
width: 6.5rem;
padding: 0.75rem 0.5rem;
margin: 0.25rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0369a1;
text-align: center;
}
</style>
<div>
<span class="slip">Slip 4</span>
<span class="slip">Slip 7</span>
<span class="slip">North quay</span>
</div>vertical-align
Inline-block boxes align with the line, not with each other like flex items. vertical-alignshifts a box relative to the text baseline: top, middle, bottom, or a length. Use it when a short label sits next to a taller chip.
Example
<style>
.label {
display: inline-block;
vertical-align: middle;
color: teal;
margin-right: 0.5rem;
}
.hours {
display: inline-block;
vertical-align: middle;
padding: 0.85rem 1rem;
background: teal;
color: white;
}
</style>
<p>
<span class="label">Harbor studio</span>
<span class="hours">8–16</span>
</p>If chips sit on different baselines, set the same vertical-align on each, or switch the row to flex. Flex align-items is easier once you knowAlign.
The space between boxes
HTML whitespace between tags becomes a real gap — like the space between words. Two inline-block cards with a newline between them will not touch. Flex gap does not have this quirk.
Example
<style>
.tags {
font-size: 0;
}
.tag {
display: inline-block;
font-size: 1rem;
padding: 0.35rem 0.7rem;
background: #ccfbf1;
color: #0f766e;
border: 1px solid teal;
}
</style>
<div class="tags">
<span class="tag">Sky</span>
<span class="tag">Teal dock</span>
<span class="tag">Lantern</span>
</div>Setting font-size: 0 on the parent and restoring it on the children is a common fix. Putting the tags on one line with no spaces also works. A flex row with gap is cleaner for new work.
font-size: 0 on a parent that also holds real sentences will crush that text. Limit the trick to a wrapper that only contains the chips.
Compared with inline and block
| inline | inline-block | block | |
|---|---|---|---|
| Starts a new line | No | No | Yes |
| Width and height | Ignored | Apply | Apply |
| Margin top / bottom | Limited | Apply | Apply |
| Wraps like | A word | A word | A paragraph |
For a row of equal cards with even gaps, prefer flex. Use inline-block when the items should wrap exactly like text, or when you are reading a sheet that already uses it. SeeDisplay for the full list of box types.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Maths
Tiles that sit in a line but have width
inline-block is inline in the line box but accepts width, height, and vertical-align. Whitespace between tags can show as gaps — pack the HTML or set font-size 0 on the parent.
Flex with gap is the modern row. inline-block still appears in old email HTML.
Example
<style>
.tile { display: inline-block; width: 72px; background: #e0e7ff; padding: 0.5rem; }
</style>
<div class="tile">3 m</div>
<div class="tile">4 m</div>
<div class="tile">5 m</div>Engineering
Two status chips
Chips in a row is a glance UI. inline-block keeps them as boxes you can pad. A pure inline span would not honour a set width.
Example
<style>
.chip { display: inline-block; padding: 0.3rem 0.6rem; background: #ccfbf1; }
</style>
<div class="chip">ok</div>
<div class="chip">12 mT</div>