All 63 CSS units in seven groups. Each one has its formula, an example, where it helps, where it bites and what browsers support it.
Your device, right now
Measured in this browser window. It updates when you resize, zoom or rotate.
Root font size (1rem)
…
1vw
…
1vh
…
1svh (small viewport)
…
1lvh (large viewport)
…
1dvh (dynamic viewport)
…
1ch (body font)
…
Device pixel ratio
…
Scrollbar width
…
Safe area (top, right, bottom, left)
…
Try it
Two experiments. Each runs in a frame, and inside a frame the viewport and the root font size belong to the frame, so every unit does exactly what it does in a real page.
Width: what follows what?
Make the frame narrower or wider. Viewport units follow the frame. The container unit follows the box inside it.
vw, svw, lvw and dvw agree here. Browser toolbars mostly change the height of a phone's viewport, not its width, so the variants part ways only in the vertical direction. Both bars sit in the narrower inner box. 50% measures that box. 50cqw still measures the container.
Fixed lengths tied to the CSS pixel by constant ratios.
Reference The CSS pixel
px
The CSS pixel: the anchor that the other absolute units are measured in.
Safe to useBaseline: widely available
Chrome1+
Edge12+
Firefox1+
Safari1+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
1+
Chrome Android
18+
Edge
12+
Firefox
1+
Firefox Android
4+
Safari
1+
Safari iOS
1+
Formula1px = 1/96in
What changes it
Moves with
page zoom
Stays put under
the reader's text size
the window size
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Hairlines, shadows and the box around a fixed bitmap: details that should hold still while the text around them scales.
Watch out
A CSS pixel is not a screen pixel. On a 2x display one px covers 2×2 device pixels, and page zoom changes that ratio too. Text in px still grows with page zoom, but it ignores the default font size set in browser settings.
Example The text moves to rem and follows the reader; the hairline stays in px and holds still.
@page margins and the other print sizes that the rest of the sheet is derived from.
Watch out
Nothing on screen is measured with a ruler. The browser does not know how large the display really is, so 1in always draws as 96 CSS px. Only paper output makes the unit physical.
Example On screen 3in is 288 CSS pixels of unknown physical size. On paper the margin is a real inch.
Print styles written in metric: A4 margins, label sheets, posters.
Watch out
A CSS centimeter is a ratio, not a measurement. A 5cm box on a phone is not five centimeters wide to the eye. Check physical sizes in print preview or a PDF, never on the screen.
Example A label meant to print at 5 by 3 centimeters.
A size measured from the font size set on the page's html element.
Safe to useBaseline: widely available
Chrome4+
Edge12+
Firefox3.6+
Safari5+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
4+
Chrome Android
18+
Edge
12+
Firefox
3.6+
Firefox Android
4+
Safari
5+
Safari iOS
4+
Formula1rem = font-size of :root (16px unless the reader changed the browser default)
What changes it
Moves with
the reader's text size
page zoom
Stays put under
the window size
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Type sizes and the spacing between blocks, so that one browser setting scales the whole page.
Watch out
Setting the root size in pixels (say, 16px on html) switches off the reader's preference: rem then stays at 16px whatever the browser setting says. Leave the root alone or use a percentage.
Example No root size in px, and the heading follows the reader's setting along with its margin.
Before
html { font-size: 16px; }h1 { font-size: 32px; margin-block-end: 24px;}
Formula1ch = advance width of "0" in the element's font (0.5em if it cannot be measured)
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
The measure of a text column, and inputs for a known number of digits.
Watch out
In IBM Plex Sans, the font of this site, a line 65ch wide held about 87 characters of English prose: zeros are wider than most letters. The number to write depends on the font, and changes when the font does.
Example A measure that follows the font instead of a pixel count. Tune the number in the real font.
The zero-digit width, measured in the font of the root element.
!Use with a fallbackBaseline: newly available since January 2026
Chrome111+
Edge111+
Firefox147+
Safari17.2+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
111+
Chrome Android
111+
Edge
111+
Firefox
147+
Firefox Android
147+
Safari
17.2+
Safari iOS
17.2+
Formula1rch = the value of ch on the root element
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
A line length that must stay the same when a component switches to another font family.
Watch out
In a heading set larger than the body, 60rch is narrower than 60ch by exactly the ratio of the two font sizes, because rch still counts the body's zero. Browsers without rch drop the declaration, so write the ch line first.
Formula1ex = x-height of the element's font (0.5em if it cannot be determined, as the specification has it)
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
An inline mark that should stop where the lowercase letters stop.
Watch out
At one font-size the x-height differs from font to font, so 1ex is a poor bridge across a font stack. If the intended font fails to load, every ex value changes with the fallback.
How tall a lowercase x is in the font set on the root element.
!Use with a fallbackBaseline: newly available since January 2026
Chrome111+
Edge111+
Firefox147+
Safari17.2+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
111+
Chrome Android
111+
Edge
111+
Firefox
147+
Firefox Android
147+
Safari
17.2+
Safari iOS
17.2+
Formula1rex = the value of ex on the root element
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
Small marks that must share one height across components set in different fonts.
Watch out
Where the unit is unknown the browser throws the declaration away. Write a rem value first and the rex line after it, so older browsers keep the first one.
How tall the capital letters are in the current font.
Safe to useBaseline: widely available
Chrome118+
Edge118+
Firefox97+
Safari17.2+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
118+
Chrome Android
118+
Edge
118+
Firefox
97+
Firefox Android
97+
Safari
17.2+
Safari iOS
17.2+
Formula1cap = cap height of the element's font (the ascent of the font if it cannot be determined, as the specification has it)
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
An icon or box that should be exactly as tall as the capitals of its label.
Watch out
Cap height belongs to the font, so changing the font changes every cap value. A browser without the unit drops the declaration, so give the property a fallback line before the cap one.
Example 1em overshoots the capitals by the ascender room; 1cap stops where they stop.
Capital-letter height as the root element's font draws it.
!Use with a fallbackBaseline: newly available since January 2026
Chrome118+
Edge118+
Firefox147+
Safari17.2+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
118+
Chrome Android
118+
Edge
118+
Firefox
147+
Firefox Android
147+
Safari
17.2+
Safari iOS
17.2+
Formula1rcap = the value of cap on the root element
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
One icon height for the whole page, tied to the capitals of the main font.
Watch out
rcap reads the font of the root, so a component set in another font still gets the capital height of the page, not its own. Where the unit is missing the declaration is dropped, so put a rem line before it.
The width of the ideograph 水, taken from the font set on the root element.
!Use with a fallbackBaseline: newly available since January 2026
Chrome111+
Edge111+
Firefox147+
Safari17.2+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
111+
Chrome Android
111+
Edge
111+
Firefox
147+
Firefox Android
147+
Safari
17.2+
Safari iOS
17.2+
Formula1ric = the value of ic on the root element
What changes it
Moves with
the reader's text size
page zoom
the font in use
Stays put under
the window size
the query container
phone toolbars
the writing mode
Reach for it when
A CJK grid that holds across components, including ones set in a Latin-only font.
Watch out
Like ic it needs a 水 glyph, here in the root font, and falls back to the root's 1em without one. Where the unit is unsupported the declaration is ignored, so write an em line before it.
Gaps and heights counted in the element's own lines: margin-block: 1lh, min-block-size: 4lh.
Watch out
With line-height: normal, 1lh depends on the font's own metrics, and a line can grow taller than line-height when tall inline content sits in it, so 3lh is not always three rendered lines.
Example One blank line in whatever font and size the paragraph uses, instead of a number that fits one size.
The line height set on the root element, shared by the whole page.
Safe to useBaseline: widely available
Chrome111+
Edge111+
Firefox120+
Safari16.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
111+
Chrome Android
111+
Edge
111+
Firefox
120+
Firefox Android
120+
Safari
16.4+
Safari iOS
16.4+
Formula1rlh = used line-height of :root
What changes it
Moves with
the reader's text size
page zoom
Stays put under
the window size
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Page-wide vertical rhythm: section spacing in whole lines of body text.
Watch out
It tracks the root's line height, so a component with bigger text will not get taller gaps from it. Good for page rhythm, wrong for spacing inside a component.
Example Section padding is two lines of body text.
A share of some other value. Which value depends on the property.
Reference Another value
%
A share of some other value. Which value depends on the property.
Safe to useBaseline: widely available
Chrome1+
Edge12+
Firefox1+
Safari1+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
1+
Chrome Android
18+
Edge
12+
Firefox
1+
Firefox Android
4+
Safari
1+
Safari iOS
1+
FormulaN% = N/100 × the reference value of the property
What changes it
Moves with
page zoom
Stays put under
the reader's text size
the window size
the font in use
the query container
phone toolbars
the writing mode
And whatever moves the property's own reference: the parent's width, the element's box, the inherited font size.
Reach for it when
Widths that share a parent, and translate() or border-radius, which take their percentage of the element's own box.
Watch out
In a box 400px wide, padding-block: 10% is 40px whatever the height of the box. In horizontal text, padding and margin take their percentage from the width on all four sides.
Example 5% of the container's width, not of its height.
Shares of the window, with three extra readings for phones whose toolbars come and go.
Reference The viewport
vw
1% of the viewport's width.
Safe to useBaseline: widely available
Chrome20+
Edge12+
Firefox19+
Safari6+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
20+
Chrome Android
25+
Edge
12+
Firefox
19+
Firefox Android
19+
Safari
6+
Safari iOS
6+
Formula1vw = 1/100 of the viewport width
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Fluid type with a rem term inside clamp(), and full-bleed bands that ignore their parent.
Watch out
100vw includes the room a classic vertical scrollbar takes, so a block of that width is wider than the room left and the page scrolls sideways. Overlay scrollbars take no room, so the bug can hide on one machine and show on another.
Example The rem terms follow zoom and the reader's default size, the vw term does not. In a 1280px window, zooming to 200% enlarges this text 1.33 times, not 2.
Formula1vh = 1/100 of the viewport height (the large viewport)
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Full-height panels and height floors on desktop, where no toolbar comes and goes.
Watch out
Plain vh follows the large viewport, the size with retractable toolbars pulled away. Where a browser has such toolbars, a 100vh block is taller than the visible area while they are shown, so its bottom edge sits under them.
Example Under a 60px header, a 100vh section makes the page 60px taller than the window. Take the header off.
A hundredth of the viewport along the inline axis, the direction text runs in.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1vi = 1/100 of the viewport size in the inline direction
What changes it
Moves with
the window size
the writing mode
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
Reach for it when
Layouts that must work in horizontal and vertical writing modes.
Watch out
MDN and the summary table in the specification take the axis from the writing-mode of the root, while the definition of vi says the box's own. Chromium 156, Firefox 157 and WebKit 27.2, measured on this site, follow the definition: the element that carries the unit, set there or inherited. The readings agree until an element overrides writing-mode, so test that case in each browser you support. Right-to-left direction changes nothing in either reading, only a vertical writing-mode does.
Example Resolves like 40vw in horizontal text and like 40vh in vertical text.
A hundredth of the viewport along the block axis, the direction lines stack in.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1vb = 1/100 of the viewport size in the block direction
What changes it
Moves with
the window size
the writing mode
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
Reach for it when
Panels and rails sized along the flow direction, for pages that may switch to vertical text.
Watch out
In horizontal writing it equals vh, so mistakes stay hidden until a page switches to vertical text. Like vh it follows the large viewport, so toolbars can cover its end. Whose writing-mode picks the axis is the question described under vi: the root's in MDN, the element's in the definition and in all three engines measured there.
Example As tall as the viewport in the direction text stacks.
Formula1vmax = 1% of max(viewport width, viewport height)
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
A background shape that must reach every edge of the window.
Watch out
A block of 100vmax is longer than the window in its shorter direction (1280px against 800px in a 1280 by 800 window), so it scrolls or overflows unless a parent clips it.
Example A circle 1.5 times as wide as the window's longer side, enough to reach the corners of a window of any shape. It overflows on purpose, so clip it.
One percent of the small viewport, measured the way a line of text runs.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1svi = 1/100 of the small viewport in the inline direction
What changes it
Moves with
the window size
the writing mode
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
Reach for it when
A column that fits the small viewport along its lines, in code shared between writing modes.
Watch out
Put vertical text on html and svi measures the height, in both readings. Writing-mode on a child is where the readings part: MDN and the summary table ignore it, the definition and Chromium follow it. See vi for the measurement.
Example Lines run top to bottom, so the column is 90% of the small viewport height.
html { writing-mode: vertical-rl;}.column { inline-size: 90svi;}
A hundredth of the shorter side with browser toolbars shown.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1svmin = 1% of min(svw, svh)
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
A shape that fits the screen with every toolbar showing.
Watch out
svmin differs from vmin only in a window wider than tall. There the shorter side is the height, and the small height sits below the large one that plain vmin follows.
A hundredth of the visible height with browser toolbars fully retracted.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1lvh = 1/100 of the height when browser toolbars are retracted
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
Backgrounds and opening art that should fill the screen once the toolbars retract.
Watch out
lvh is what 100vh already means: plain vh is defined to follow the large viewport, and in Chromium 156 on a desktop 50vh and 50lvh measured the same. Swapping one for the other changes nothing, it only states your intent.
Example Covers the screen even after the toolbars retract.
One percent of the large viewport, measured along the line direction.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1lvi = 1/100 of the large viewport in the inline direction
What changes it
Moves with
the window size
the writing mode
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
Reach for it when
A full-bleed length along the lines, for components shared between writing modes.
Watch out
Its axis follows the writing-mode of the root in MDN and of the element in the definition and in the three engines measured for vi. A column of 100lvi is as tall as the large viewport, so while the toolbars are shown it runs under them.
Example The column is as long as the largest viewport height.
html { writing-mode: vertical-rl;}.column { inline-size: 100lvi;}
A hundredth of the shorter side with browser toolbars retracted.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1lvmin = 1% of min(lvw, lvh)
What changes it
Moves with
the window size
Stays put under
the reader's text size
page zoom
the font in use
the query container
phone toolbars
the writing mode
Reach for it when
A badge or dial checked against the largest size it can reach.
Watch out
lvmin ignores the toolbars: it is the same whether they are shown or hidden. In a window wider than tall it is the large height, so a square of 100lvmin is taller than the visible area while the toolbars are shown.
Example A square badge sized from the large viewport.
A hundredth of the visible height, following the toolbars as they show and hide.
Safe to useBaseline: widely available
Chrome108+
Edge108+
Firefox101+
Safari15.4+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
108+
Chrome Android
108+
Edge
108+
Firefox
101+
Firefox Android
101+
Safari
15.4+
Safari iOS
15.4+
Formula1dvh = 1/100 of the currently visible height
What changes it
Moves with
the window size
phone toolbars
Stays put under
the reader's text size
page zoom
the font in use
the query container
the writing mode
Reach for it when
A chat composer or a sheet that must end exactly where the visible area ends.
Watch out
A box in dvh is resized each time the toolbars move, in the middle of a scroll. Whether the on-screen keyboard counts as a toolbar is up to the browser; this site has not measured it on a phone.
Example Ends where the visible area ends as the toolbars come and go; 100vh reaches under them.
One percent of the nearest query container's height.
Safe to useBaseline: widely available
Chrome105+
Edge105+
Firefox110+
Safari16+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
105+
Chrome Android
105+
Edge
105+
Firefox
110+
Firefox Android
110+
Safari
16+
Safari iOS
16+
Formula1cqh = 1/100 of the nearest container's height
What changes it
Moves with
page zoom
the query container
Stays put under
the reader's text size
the window size
the font in use
phone toolbars
the writing mode
Reach for it when
Fixed-height widgets such as dashboard tiles and chart panels.
Watch out
container-type: size is the only setting that lets the height be queried, and it also cuts the box off from its children's height. Give the container a block-size, or it measures 0px and so does everything in cqh.
Example A size container with no height of its own is 0px tall, and so is the chart. The block-size line fixes both.
One percent of the container's inline size, the direction text runs along.
Safe to useBaseline: widely available
Chrome105+
Edge105+
Firefox110+
Safari16+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
105+
Chrome Android
105+
Edge
105+
Firefox
110+
Firefox Android
110+
Safari
16+
Safari iOS
16+
Formula1cqi = 1/100 of the nearest container's inline size
What changes it
Moves with
page zoom
the query container
the writing mode
Stays put under
the reader's text size
the window size
the font in use
phone toolbars
Reach for it when
The default choice for component type, gaps and widths, in any writing mode.
Watch out
An element with container-type is a container for its descendants only. Its own cqi values look further up, to the next container, or to the small viewport.
Example The heading scales with the card it sits in, not with the window.
One percent of the container's block size, the direction lines stack along.
Safe to useBaseline: widely available
Chrome105+
Edge105+
Firefox110+
Safari16+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
105+
Chrome Android
105+
Edge
105+
Firefox
110+
Firefox Android
110+
Safari
16+
Safari iOS
16+
Formula1cqb = 1/100 of the nearest container's block size
What changes it
Moves with
page zoom
the query container
the writing mode
Stays put under
the reader's text size
the window size
the font in use
phone toolbars
Reach for it when
Heights inside fixed-height containers, in any writing mode.
Watch out
Inside an inline-size container nested in a size container 300px tall, 10cqb was 30px from the outer box while 10cqi came from the inner one. The two axes look up the tree separately.
One percent of whichever side of the container is shorter.
Safe to useBaseline: widely available
Chrome105+
Edge105+
Firefox110+
Safari16+
All browsers
First version with support, from MDN browser data
Browser
Since
Chrome
105+
Chrome Android
105+
Edge
105+
Firefox
110+
Firefox Android
110+
Safari
16+
Safari iOS
16+
Formula1cqmin = min(1cqi, 1cqb)
What changes it
Moves with
page zoom
the query container
the writing mode
Stays put under
the reader's text size
the window size
the font in use
phone toolbars
Reach for it when
Squares and icons that must fit the container in both directions.
Watch out
With container-type: inline-size the block axis is not measured, so cqb, and with it cqmin and cqmax, looks further up the tree or is replaced by the small viewport height. Use container-type: size for both axes.
Formula1fr = one part of the space left after fixed tracks and gaps
What changes it
Moves with
page zoom
Stays put under
the reader's text size
the window size
the font in use
the query container
phone toolbars
the writing mode
And the free space of its own grid: every fixed track, gap and content minimum changes what is left to share.
Reach for it when
Grid columns that split the leftover width: a fixed sidebar next to a flexible main column.
Watch out
1fr has a hidden floor: the track never gets narrower than its content's smallest size, so a code block or a long URL widens the whole grid. minmax(0, 1fr) takes the floor away.
Example A fixed sidebar and a main column that may shrink below its content.
Rotations beyond 1turn are valid and spin more than once in an animation: 2.5turn ends at half a turn after two full spins, but a static 2.5turn looks like 0.5turn.
Short interface timings that you adjust in small steps.
Watch out
Scripts read durations back in seconds: in Chromium getComputedStyle reports a 300ms transition as 0.3s, so do not compare it with a string like "300ms".
min-resolution queries that serve sharper assets to dense screens.
Watch out
A query for exactly 2dppx matches only at a ratio of 2, not at 1.5 or 3, so use min-resolution. The ratio also moves with anything that changes device pixels per CSS pixel, so a resolution query does not prove the screen is dense.
Example An exact match misses ratios of 1.5 and 3; min-resolution catches every dense screen.
