The three display types — side by side
Normal flow stacks block boxes top-to-bottom and runs inline boxes
left-to-right like text. display decides which league a box plays in.
Watch the measured values: block fills the stage,
inline ignores width/height (computed width = auto),
inline-block stays inline but respects them.
① display: block
Each box starts a new line and fills the inline space (width:auto → fills stage). Box B is width:50% yet still sits below A — blocks never share a line.
| computed | value |
|---|---|
| display | — |
| clientWidth (fills stage) | — |
② display: inline
The red span has width:200; height:80; margin-top:30 set — all
ignored. It flows in the line like the text around it; no new line, no block height.
| computed | value |
|---|---|
| display | — |
| width (ignored → auto) | — |
| offsetWidth (content only) | — |
③ display: inline-block
Stays inline (sits on the text line) but now width/height apply.
Note the visible gap between the two boxes — that's the
inline-block whitespace bug (whitespace in the HTML becomes a space).
| computed | value |
|---|---|
| display | — |
| offsetWidth (respects width) | — |
Block Formatting Context — the containment trick
A BFC is an isolated layout region. An element that establishes one will
contain internal floats, exclude external floats, and
suppress margin collapsing. Below: the same child (margin-top:40) —
on the left the margin collapses through the plain parent (child sits flush,
offsetTop 0); on the right display:flow-root creates a BFC so the margin
stays inside (offsetTop 40).
parent: plain block (no BFC)
child.offsetTop (vs parent) = — ← margin escaped; parent is pushed down instead
parent: display:flow-root (BFC)
child.offsetTop (vs parent) = — ← margin held inside the BFC
What creates a BFC: the root <html>, floats,
position:absolute/fixed, display:inline-block,
display:flow-root (the clean, side-effect-free one),
display:flex/grid containers, and block elements with
overflow ≠ visible/clip.