Block and Inline Formatting Contexts

## Normal flow is two modes, not three Every element in normal flow is laid out either as a **block-level box** stacked vertically in a *block formatting context*, or as an **inline-level box** placed horizontally into *line boxes* in an *inline formatting context*. The `display` property picks the box's **outer** role (how it participates in its parent) and its **inner** role (how it lays out its own children). `block` is outer block / inner flow; `inline` is outer inline / inner flow; `inline-block` is outer inline / inner flow-root — an inline-level box whose insides are a self-contained block layout. ## display: block A block box begins on a new line and, with `width: auto`, fills the inline size of its containing block. All four margins apply, vertical margins between siblings collapse under normal-flow rules, `width` and `height` resolve against the box-sizing model, and the box never sits beside text. Paragraphs, sections and list items are block-level by default in the user-agent stylesheet. ```css .card { display: block; width: 20rem; height: 8rem; margin: 1rem 0; /* all of this applies */ } ``` ## display: inline An inline box is dropped into the current line box among the text. Three consequences trip people up: 1. **`width` and `height` are ignored** on non-replaced inline boxes. The box is exactly as wide as its content. 2. **`margin-top` and `margin-bottom` have no effect.** They are not collapsed and not clamped — they simply do not apply to a non-replaced inline box. 3. **Vertical `padding` and `border` do apply and do paint**, but they do not contribute to the height of the line box. A `<span>` with `padding: 1em` will spill its background over the lines above and below rather than pushing them apart. Horizontal margins, padding and borders behave normally and displace the following text. An inline box can also **fragment**: if it wraps, it becomes several boxes, one per line, and horizontal borders appear only at the true start and end unless `box-decoration-break: clone` is set. ```css span.tag { width: 200px; /* ignored */ height: 40px; /* ignored */ margin: 20px 8px; /* only the 8px sides do anything */ padding: 4px 8px; /* paints, but the line box does not grow */ } ``` ## Replaced elements are the exception `<img>`, `<video>`, `<iframe>`, `<canvas>` and most form controls are **replaced elements**: their content comes from outside CSS and they carry an intrinsic size. They are inline-level by default, but `width` and `height` *do* apply to them, and so do vertical margins. That is why `img { width: 100px }` works while `span { width: 100px }` does nothing — the difference is replaced versus non-replaced, not something about the `display` value. ## display: inline-block `inline-block` was introduced for exactly the case where you want a box to sit in a line of text but still be sized. Its outer role is inline, so it is placed on the baseline of the line box and it responds to `text-align` and `vertical-align` on the parent. Its inner role is a block container that establishes its own formatting context, so `width`, `height`, vertical margins, padding and borders all work, its children lay out as blocks, and it does not fragment across lines — it moves to the next line whole. The cost of the inline outer role is that the box is still text-like: whitespace between two `inline-block` boxes in the source renders as a real space character, so the two boxes appear separated even with `margin: 0`, and the boxes align on their baselines rather than their edges. ```css .chip { display: inline-block; width: 6rem; height: 2rem; margin: 0.5rem; /* all of this applies */ } ``` ## The two-value syntax Modern CSS lets you spell the outer and inner roles explicitly: `display: block flow` is the classic `block`, `display: inline flow` is `inline`, and `display: inline flow-root` is exactly `inline-block`. The legacy single keywords remain valid aliases and are what you will see in nearly every codebase, but the two-value form makes the outer/inner model visible, which is the clearest way to reason about all three values. ## Choosing between them Use `block` for anything that owns a band of the page. Use `inline` for things that must flow with prose — emphasis, links, inline code. Reach for `inline-block` when a sized box genuinely belongs inside running text, such as a badge in a sentence. For laying a *row* of sized boxes out side by side, a flex or grid container is the better modern answer: it blockifies its children, so you get sizing without the baseline and whitespace behaviour that `inline-block` drags along.