--- title: "CSS Units Cheatsheet" slug: "css-units" category: "cheatsheets" tags: ["cheatsheets", "css", "frontend", "reference", "layout", "responsive"] status: "stable" last_updated: 2026-05-14 summary: "Every CSS unit with when to use each: px, rem, em, %, vw/vh, ch, dvh/svh/lvh, fr, and the container-relative units." related: [ "[[frontend/css]]", "[[frontend/css-custom-properties]]", "[[frontend/css-grid]]", "[[frontend/css-flexbox]]", "[[frontend/css-container-queries]]", "[[frontend/tailwind-responsive]]", "[[cheatsheets/css-selectors]]", "[[cheatsheets/index|Cheatsheets]]", ] --- ## 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 [[frontend/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 `` 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 [[frontend/css-container-queries]] for the full pattern. ## Common gotchas - `em` in `padding` and `margin` is relative to the element's own `font-size`, not the parent's. This surprises when the element has an inherited font size. - `vh` on mobile does not account for the URL bar. The element is taller than the visual viewport when the chrome is visible. Use `dvh` or `svh` instead. - `%` heights require every ancestor to have an explicit height. Setting `height: 100%` on a child of an `auto`-height parent has no effect. - `fr` units in `grid-template-columns` do not account for `gap`. A `1fr` track is narrower than expected when `gap` is set. - `ch` width varies by font. `65ch` in one typeface may not equal `65ch` in another. Define a fallback `max-width` in `px` when exact prose width matters. - `rem` ignores browser-level font size overrides if the root `html` element sets `font-size` in `px`. Set the root in `%` (e.g., `font-size: 100%`) to respect the user's preference. ## Related - [[frontend/css]] - [[frontend/css-custom-properties]] - [[frontend/css-grid]] - [[frontend/css-flexbox]] - [[frontend/css-container-queries]] - [[frontend/tailwind-responsive]] - [[cheatsheets/css-selectors]] - [[cheatsheets/index|Cheatsheets]]