Home/Tools/Utilities/CSS Length Units Reference

Utilities · Generator

CSS Length Units Reference

Compare all CSS length units (px, em, rem, vw, vh, cqw…) with live pixel conversion.

Value

CSS Value1

See how 1 of each unit converts to pixels

Context Values

Root font-size16px

Current font-size16px

Parent width800px

Viewport width1440px

Viewport height900px

Filter by Category

Unit Reference

26 units

1px→1px

Pixels — device-independent pixel

1em→16px

Relative to current element font-size

rem

1rem→16px

Relative to root element font-size

1vw→14.4px

1% of viewport width

1vh→9px

1% of viewport height

vmin

1vmin→9px

1% of smaller viewport dimension

vmax

1vmax→14.4px

1% of larger viewport dimension

svw

1svw→14.4px

1% of small viewport width

svh

1svh→9px

1% of small viewport height

dvw

1dvw→14.4px

1% of dynamic viewport width

dvh

1dvh→9px

1% of dynamic viewport height

lvh

1lvh→9px

1% of large viewport height

1%→8px

Percentage of parent element

1ch→8px

Width of "0" character in current font

1ex→8px

x-height of current font

1lh→24px

Line height of current element

rlh

1rlh→24px

Line height of root element

cqw

1cqw→8px

1% of container query width

cqh

1cqh→9px

1% of container query height

cqmin

1cqmin→8px

1% of smaller container dimension

cqmax

1cqmax→9px

1% of larger container dimension

1cm→37.8px

Centimeters (1cm = 37.8px)

1mm→3.8px

Millimeters (1mm = 3.78px)

1in→96px

Inches (1in = 96px)

1pt→1.3px

Points (1pt = 1.33px)

1pc→16px

Picas (1pc = 16px)

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Lengths Reference?

Visual reference for all CSS length units — px, rem, em, vh, vw, dvh, svh, ch, ex, and more. Compare units side by side.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Lengths Reference

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Browse unit categories

Units are grouped: absolute (px, pt, cm), font-relative (rem, em, ch, ex), viewport (vw, vh, dvh, svh, lvh), and container (cqw, cqh).

See live comparisons

Each unit is shown with a live-sized element demonstrating the computed value at your current viewport size.

Click to copy

Click any unit name to copy a CSS usage example.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

units-reference.css

/* Absolute units */
.box-px { width: 200px; }     /* 200 physical pixels */
.box-pt { width: 150pt; }     /* 150 points (1pt = 1.333px) */

/* Relative to font size */
.box-rem { width: 12.5rem; }  /* 12.5 x root font-size (usually 200px) */
.box-em  { width: 12.5em; }   /* 12.5 x current element's font-size */
.box-ch  { width: 60ch; }     /* 60 x width of "0" in current font */

/* Relative to viewport */
.box-vw  { width: 50vw; }     /* 50% of viewport width */
.box-dvh { height: 100dvh; }  /* 100% of dynamic viewport height (mobile-safe) */
.box-svh { height: 100svh; }  /* 100% of smallest viewport height */

Use dvh (dynamic viewport height) instead of vh on mobile. 100vh includes the browser chrome on iOS, causing overflow. 100dvh adjusts as the browser chrome shows/hides.

Pro tips

Pro tips for better results

★

dvh replaces vh for full-height mobile layouts

On iOS Safari, 100vh includes the address bar height. The page overflows until the user scrolls. 100dvh is the correct unit for full-height mobile layouts since iOS 15.4 and Chrome 108.

★

ch units are ideal for prose line length

max-width: 65ch limits text containers to 65 characters wide — the optimal reading line length. ch is the width of the "0" character in the current font, giving typographically-correct line lengths.

FAQ

Frequently asked questions

svh is the small viewport height (address bar visible). lvh is the large viewport height (address bar hidden). dvh is the dynamic viewport height that changes as the browser chrome appears/disappears. Use dvh for most full-height elements.

Use ch for text containers (max-width on paragraphs) because it scales with the font and maintains constant character count per line. Use em for padding/margins on buttons that should scale proportionally with button text size.