Glossary — CSS Units

CSS units lean on a handful of underlying concepts. When a definition says “relative to the containing block” or “the advance measure of the glyph,” these are the terms doing the work. Here they are, in plain language.

Containing block

The rectangle a box’s percentages and offsets are resolved against. It is not simply “the parent” — it depends on the box’s position:

static / relative → the content box of the nearest block-container ancestor.
absolute → the padding box of the nearest positioned ancestor.
fixed → the viewport (or initial containing block) — unless an ancestor establishes one via transform, perspective, filter, backdrop-filter, contain: layout|paint|strict|content, will-change of a transform-like property, or content-visibility, in which case that ancestor’s padding box is used instead. The same ancestor rule also applies to absolute boxes.

When you read “width: 50% is relative to the containing block,” this is the rectangle in question. See Percentage.

Initial containing block (ICB)

The root-level containing block, derived from the viewport in continuous media (the size of the viewport) and from the page area in paged media. Viewport units are ultimately defined against the ICB. See Viewport units.

Definite size

A size the browser can resolve without first laying out the contents — e.g. a pixel height, or a percentage whose reference is itself definite. Its opposite is an indefinite (often auto) size. This is the crux of the height: 100% trap: a percentage height needs a definite reference, so height: 100% inside an auto-height parent is treated as auto. See Percentage.

Inline axis / block axis

Writing-mode-aware directions. The inline axis is the direction text flows (horizontal in English); the block axis is the direction lines stack (vertical in English). Logical units and properties (vi/vb, cqi/cqb, inline-size, margin-block) are defined along these axes rather than physical width/height, so they adapt to vertical and RTL writing. See Viewport units.

Advance measure

The space a glyph occupies along the direction text runs, including its side bearings — i.e. how far the cursor advances after drawing it, not the visible ink width. It follows the writing direction, so in a vertical writing mode the advance measure is vertical. ch is the advance measure of 0; ic is the advance measure of 水. See Font-relative units.

x-height

The height of lowercase letters without ascenders or descenders — literally the height of a lowercase x. Drives the ex unit and strongly affects how large a typeface looks at a given font-size. See Font-relative units.

Cap height

The height of capital letters from the baseline. Drives the cap unit; useful for aligning icons to the top of uppercase text. Typically smaller than 1em. See Font-relative units.

Reference pixel

The CSS definition of px: the visual angle of one pixel on a 96 DPI device viewed at arm’s length. It decouples the CSS pixel from the physical device pixel, which is why 1px can map to 2+ device pixels on HiDPI screens. See Absolute units.

Device pixel ratio (DPR)

The number of device pixels per CSS pixel, along one axis (window.devicePixelRatio). A “2× / Retina” display has a DPR of 2, so 1px of CSS is drawn with 4 device pixels (2 × 2). It tracks page zoom as well as hardware — the spec measures the CSS pixel at the current page zoom — so the same screen reports 2 at 100% and 4 at 200%. Mirrored by the resolution units: 2dppx = 2x = 192dpi. See Special units.

Query container

An ancestor element opted in with container-type: inline-size or size (the default normal is the opt-out), against which container query units (cq*) and @container rules resolve. Without an eligible query container, cq* units fall back to the small viewport. See Container query units.

Computed value vs used value

The computed value is what the cascade resolves a property to before layout (e.g. font-size: 1.5em → a pixel length). The used value is the final value after layout, when any remaining dependencies (like percentage widths needing a definite container) are known. Font-relative units resolve against computed metrics; a user-agent feature like an enforced minimum font size can still adjust the size that’s actually used. See Font-relative units.

Browser chrome

The browser’s own UI around the page — address bar, toolbars, tab strip. On mobile it expands and retracts as you scroll, changing the visible area. This is the whole reason the small / large / dynamic viewport unit families exist. See Viewport units.

Flexible length

A length that represents a proportion of available space rather than a fixed measurement. fr is the only one in CSS; it resolves to leftover grid space, so it can’t be used outside a track list. See The fr unit.

Compounding (cascade trap)

When a relative font-size like em (or %) is applied to nested elements, each level multiplies the previous one — 1.5em five levels deep is 1.5⁵ ≈ 7.6×. rem avoids this by always referring to the root. See Font-relative units.

You’ll meet these terms in context throughout the guide — start from any unit article, the Decision Tree, or the Cheatsheet.