Overview
CSS has more than a dozen length units. Picking the wrong one produces layouts that break on zoom, small screens, or devices with dynamic browser chrome. This card maps each unit to the situation where it wins and the situations where it fails. For cascade and custom-property patterns, see css-custom-properties.
Absolute units
Use only when the output maps to physical rendering (print, canvas, device pixel counts).
| Unit | Equivalent | Best use |
|---|---|---|
px | 1 CSS pixel (device-independent) | Borders, box shadows, media query breakpoints, hairline rules. |
pt | 1/72 inch | Print stylesheets only. |
cm / mm | Physical centimetres/millimetres | Print layouts; meaningless on screen. |
in | 1 inch = 96px | Print; never screen. |
px is the only absolute unit with a regular role in screen CSS. All others belong in @media print blocks.
Font-relative units
Scale with the element or root font size.
| Unit | Relative to | When it wins |
|---|---|---|
em | Font size of the current element. | Component-local spacing that should scale with the component’s own font size; icon sizes. |
rem | Font size of the root <html> element. | Site-wide typographic scale, spacing tokens. Unaffected by nested font-size overrides. |
ch | Width of the 0 glyph in the current font. | Prose column width (max-width: 65ch is a reliable readable-line constraint). |
ex | Height of the x glyph. | Rarely useful; vertical alignment of text glyphs. |
lh | Line height of the current element. | Gap that matches the rhythm of surrounding text. |
cap | Height of capital letters. | Cap-height-relative icon alignment. |
Prefer rem for most spacing and sizing. Reserve em for values that must scale with the local font (padding inside buttons, icon sizes next to text).
Percentage
| Usage | Computed against |
|---|---|
| Width / margin / padding (horizontal) | Content width of the containing block. |
| Height | Height of the containing block (only works when the parent has a defined height). |
font-size | Font size of the parent element. |
line-height | font-size of the element itself. |
transform: translate(50%) | Dimensions of the element itself, not the parent. |
% on height silently does nothing if no ancestor has a fixed height. Use min-height: 100dvh instead.
Viewport units
| Unit | What it measures | Notes |
|---|---|---|
vw | 1% of viewport width. | Fluid typography, hero sections. Includes scrollbar width in some browsers. |
vh | 1% of viewport height. | Avoid for mobile full-screen layouts; see dynamic units below. |
vmin | 1% of the smaller viewport dimension. | Square elements that fit on any orientation. |
vmax | 1% of the larger viewport dimension. | Backgrounds that must always cover. |
svh | Small viewport height (browser chrome fully visible). | Safe lower bound for mobile; use for fixed footers. |
lvh | Large viewport height (browser chrome hidden). | Use for elements that can expand when chrome disappears. |
dvh | Dynamic viewport height (updates as chrome shows/hides). | Full-screen app shells; causes reflow on scroll. |
svw / lvw / dvw | Width equivalents. | Mirror the height variants. |
Prefer dvh for min-height: 100dvh on full-page containers. The reflow cost is acceptable; the wrong fixed height is not.
Grid and flex units
| Unit | Context | What it does |
|---|---|---|
fr | grid-template-* only. | One fraction of the free space after fixed tracks are resolved. 1fr 2fr gives a 1:2 split. |
% | Flex children. | Percentage of the flex container’s main-axis size, but flex-basis overrides it. |
auto | Grid or flex items. | Shrinks to content in flex; fills remaining space in grid when combined with minmax. |
min-content | Grid tracks or flex basis. | Narrowest size the content allows without overflow. |
max-content | Grid tracks or flex basis. | Widest intrinsic size, ignoring the container. |
fit-content(N) | Grid tracks. | min(max-content, max(min-content, N)); clamps a track. |
fr units only work inside grid-template-columns and grid-template-rows. They have no meaning elsewhere.
Container-relative units (cq*)
Require container-type: inline-size (or size) on an ancestor.
| Unit | Relative to |
|---|---|
cqi | 1% of the container’s inline size. |
cqb | 1% of the container’s block size. |
cqw / cqh | Explicit container width / height. |
cqmin / cqmax | Smaller / larger container dimension. |
Use container units inside component CSS so the component adapts to its slot, not the viewport. See css-container-queries for the full pattern.
Common gotchas
eminpaddingandmarginis relative to the element’s ownfont-size, not the parent’s. This surprises when the element has an inherited font size.vhon mobile does not account for the URL bar. The element is taller than the visual viewport when the chrome is visible. Usedvhorsvhinstead.%heights require every ancestor to have an explicit height. Settingheight: 100%on a child of anauto-height parent has no effect.frunits ingrid-template-columnsdo not account forgap. A1frtrack is narrower than expected whengapis set.chwidth varies by font.65chin one typeface may not equal65chin another. Define a fallbackmax-widthinpxwhen exact prose width matters.remignores browser-level font size overrides if the roothtmlelement setsfont-sizeinpx. Set the root in%(e.g.,font-size: 100%) to respect the user’s preference.