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)
browserutils
CSS Units Reference