CSS — Inline-block

The best of both displays

.chip {
    display: inline-block;    /* flows like text… */
    padding: 6px 14px;        /* …but respects box properties */
    background: #e6fffa;
    border-radius: 999px;
}

	inline	inline-block	block
Sits beside siblings	✓	✓	✗
width/height	✗	✓	✓
vertical margins/padding	partial	✓	✓

The famous whitespace gap

Inline-level elements render the newlines between them as a space:

<a class="tab">One</a>
<a class="tab">Two</a>     <!-- ~4px gap between them -->

Four fixes, ranked:

/* 1. Flexbox parent (modern default) */
.tabs { display: flex; gap: 8px; }
.tabs .tab { display: block; }

/* 2. Zero font-size on parent */
.tabs { font-size: 0; }  .tabs .tab { font-size: 1rem; }

/* 3. Remove source whitespace (minifier does this) */

/* 4. Negative margin — fragile, avoid */

Where inline-block still shines

Baseline-aligned labels with icons

.tag {
    display: inline-block;
    vertical-align: middle;
}

Inline content inside a paragraph that must keep flowing — flex can't do that mid-sentence.

Self-sizing pills of unknown count

.filters { text-align: center; }      /* centers the row        */
.filters .chip { display: inline-block; margin: 4px; }

Wrapping rows of centered chips without any flex.

Fixed-ratio media objects pre-aspect-ratio

.thumb {
    display: inline-block;
    width: 120px;
    vertical-align: top;
}

vertical-align works here

Unlike flex/grid children, inline-blocks honor vertical-align:

.icon { vertical-align: -0.25em; }   /* optical alignment with text */

Modern hierarchy of choice

Need flow-inside-text?            → inline-block (only real use case)
Row/column layout?                → flexbox
Two-dimensional page structure?   → grid
Just centering a group?           → flex + justify-content

You'll still read plenty of legacy inline-block layouts:

/* 2015-era card row */
.card { display: inline-block; width: 30%; vertical-align: top; }
/* → today: grid-template-columns: repeat(3, 1fr); gap: … */

Mini Practice

1. Chip cloud centered via text-align + inline-block.
2. Reproduce the whitespace gap; fix all four ways.
3. Mid-paragraph badge only possible with inline-block.
4. Migrate an old inline-block card row to grid.
5. Icon baseline alignment via vertical-align on inline-block.

Next: website layout →