CSS Units Reference
// CSS units reference (px, em, rem, vw, vh, %, etc.)
px
Pixels - 1/96th of an inch on screen
font-size: 16px;
pt
Points - 1/72nd of an inch (print)
font-size: 12pt;
pc
Picas - 1pc = 12pt
font-size: 1pc;
cm
Centimeters
width: 10cm;
mm
Millimeters
width: 100mm;
in
Inches - 1in = 96px = 2.54cm
width: 1in;
Q
Quarter-millimeters - 1Q = 0.25mm
font-size: 40Q;
em
Relative to parent element font size (compounds when nested)
padding: 1.5em;
rem
Relative to root element font size (consistent, does not compound)
font-size: 1.25rem;
ch
Width of the "0" character in current font
max-width: 60ch;
ex
Height of the "x" character in current font
line-height: 2ex;
cap
Height of capital letters in current font
height: 1cap;
ic
Width of the CJK water ideograph in current font
width: 10ic;
lh
Line height of the element
margin-top: 1lh;
rlh
Line height of the root element
margin-top: 1rlh;
vw
1% of viewport width
width: 50vw;
vh
1% of viewport height
height: 100vh;
vmin
1% of the smaller viewport dimension
font-size: 5vmin;
vmax
1% of the larger viewport dimension
font-size: 5vmax;
svw
1% of small viewport width
width: 100svw;
svh
1% of small viewport height
height: 100svh;
lvw
1% of large viewport width
width: 100lvw;
lvh
1% of large viewport height
height: 100lvh;
dvw
1% of dynamic viewport width
width: 100dvw;
dvh
1% of dynamic viewport height (adjusts for mobile UI)
height: 100dvh;
cqw
1% of query container width
font-size: 5cqw;
cqh
1% of query container height
height: 50cqh;
cqi
1% of query container inline size
width: 50cqi;
cqb
1% of query container block size
height: 50cqb;
cqmin
1% of smaller query container dimension
font-size: 3cqmin;
cqmax
1% of larger query container dimension
font-size: 3cqmax;
%
Percentage of parent element property value
width: 50%;
fr
Fractional unit for CSS Grid tracks
grid-template-columns: 1fr 2fr 1fr;
deg
Degrees (angles: 0-360)
transform: rotate(45deg);
rad
Radians (angles)
transform: rotate(1.57rad);
turn
Turns (1turn = 360deg)
transform: rotate(0.5turn);
grad
Gradians (400grad = 360deg)
transform: rotate(100grad);
s
Seconds (time)
transition: all 0.3s;
ms
Milliseconds (time)
animation-duration: 300ms;
dpi
Dots per inch (resolution)
@media (min-resolution: 2dpi)
dpcm
Dots per centimeter (resolution)
@media (min-resolution: 1dpcm)
dppx
Dots per pixel (resolution, 1dppx = 96dpi)
@media (min-resolution: 2dppx)
#About CSS Units Reference
Free online CSS units reference. Browse all CSS length, percentage, and viewport units with descriptions, use cases, and examples. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
What is the difference between em and rem? ▾
em is relative to the font size of its parent element, so it compounds when nested. rem (root em) is always relative to the root element font size (usually 16px), making it more predictable for consistent sizing.
When should I use px vs rem? ▾
Use rem for font sizes and spacing to respect user font size preferences and improve accessibility. Use px for borders, shadows, and fine details where you need exact pixel values. Use viewport units (vw, vh) for responsive layouts.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-units-reference" width="100%" height="500" frameborder="0" title="CSS Units Reference"></iframe>