CSS 2.1 §10.3.9 hands a non-replaced inline-block to shrink-to-fit only when its width is auto. An explicit width is used as declared, and it sizes the box itself — not merely the room the line reserves for it — so the background, border and overflow clip are painted at that width whether or not the content fills it. CSS 2.1 §10.6.3 does the same for a non-auto height/min-height on the block axis.

The same declared width, whatever is inside

Three 90pt boxes: a full one, a one-character one, and an empty one. All three paint the same width and push what follows them to the same place. Only their heights differ, since an empty box has no content to be as tall as.

Fixed-width labels line their values up

The classic use: a label column whose width comes from the declaration rather than from the longest word in it.

An empty box is still a box

A checkbox glyph has no content at all, so a flow that measured only its words gave it no room and nothing to paint.

box-sizing decides what the width covers

Both boxes declare width: 120pt with 6pt of padding and a 2pt border either side. Under content-box the declared width is the content area, so the box paints 136pt wide; under border-box it is the whole box, and 120pt is all of it. The dashed rule below each is exactly 120pt.

Percentage widths use the containing block

The pale row is 400pt wide. Its inline-block declares width: 50%, so the purple box is exactly 200pt wide and the following text starts halfway across the row.

Content too wide for the box wraps inside it

An inline-block whose content cannot fit on one line inside it is a box of its own: it breaks its lines at its own width and takes one place on the line holding it, with its last line's baseline on that line's baseline. A word that cannot be broken at all still overflows, without moving what follows the box.

before This inline-block holds enough words to wrap across several lines of its own rather than across the lines of the block around it. after Agy

The same 120pt box holding one unbreakable word.

A declared height sizes the box the same way (CSS 2.1 §10.6.3)

Three 50pt-tall boxes: a full one, a one-character one, and an empty one. All three paint the same height, whether or not their content fills it — an empty box included, the same gap a declared width closed above.

min-height is a floor, not an override

The gold box declares min-height: 50pt with enough wrapped text that its natural content is already taller than that — so it keeps its natural (taller) height rather than being shrunk to 50pt, unlike the blue height: 50pt box beside it.

Atomic inline sizing