CSS units reference — px, rem, em, vw, dvh, cqi and more with a size preview

How to use the CSS units reference

1. Type in Filter: a unit (rem, dvh), a category (viewport, container, angle, time) or a word from the meaning (toolbar, root).
2. Read the Unit, Category, Meaning and Example columns. “Showing” gives the count out of 43.
3. Scroll to the Preview. Its bars use 96px, 1in, 2.54cm, 72pt, 6em, 6rem, 12ch, 50% and 20vw, drawn by your browser at its current zoom and window size.
4. Download the table as css-units.csv if you want it for a style guide.

What it does and when to use it

CSS has grown well beyond px and %. Newer units fix real layout problems: dvh for full-height mobile screens, ch for readable line lengths, container units for components that adapt to their slot, and lh for spacing that follows the line height. This reference collects them in one table with a one-line meaning and a sample declaration. Use it when you review a stylesheet with an unfamiliar unit, choose a unit for a new design token, or explain to a teammate why 100vh jumps on phones.

To build a fluid size that moves between two limits, use the CSS Clamp Generator. For breakpoints, the Media Query Generator writes the @media rules.

How it works

The table is a fixed list based on CSS Values and Units Level 4, plus fr from CSS Grid and the container query units. It is grouped into absolute lengths, font-relative lengths, viewport units, container units, percentages, fr, angles, times, frequency and resolution. The filter keeps rows where every word you type appears in some cell. The preview is plain HTML, so the bars show how your own browser resolves each unit right now; resize the window and the 20vw bar changes, while the 1in bar does not.

Worked examples

Root-relative type. Filter rem:

rem | Font-relative | The root element's font size. | 1rem = 16px by default

16px is the default root size in browsers; users can change it, which is why rem respects their setting.

All viewport units. Filter viewport returns Showing: 9 of 43 units: vw, vh, vmin, vmax, vi, vb and the small, large and dynamic pairs.

Mobile full height. Filter dvh returns dvh / dvw | Viewport | Dynamic viewport: tracks toolbars as they appear and disappear. | height: 100dvh.

Limits and tips

• Browser support differs for the newest units, such as rlh, rex, rch and cap; check support before you depend on them.
• 96px, 1in, 2.54cm and 72pt are the same length by definition, but none of them is guaranteed to measure an inch on a real screen.
• For quick px to rem sums, use the PX to REM Converter.