There are 44 CSS length units
Adam Argyle has written a Codepen that lists the different units.
To learn more about what each unit means:
Relative
Unit | Definition |
---|---|
% | Percentage of the parent element's font size |
em | Font size of the element |
ex | Height of the element's font |
ch | Width of the "0" (zero) character of the element's font |
cap | Hight of the capital letters of the element's font |
ic | Advance measure of the 水 CJK (Chinese/Japanese/Korean) character of the element's font |
lh | Height of the element's line height |
Root Relative
Unit | Definition |
---|---|
rem | Font size of the root element |
rex | Height of the root element's font |
rch | Width of the "0" (zero) character of the root element's font |
rlh | Height of the root element's line height |
ric | Advance measure of the 水 CJK (Chinese/Japanese/Korean) character of the root element's font |
rcap | Height of the capital letters of the root element's font |
Absolute
Unit | Definition |
---|---|
px | Pixels |
pt | Points |
pc | Picas |
in | Inches |
cm | Centimeters |
mm | Millimeters |
Q | Quarter-millimeters |
Viewport
Unit | Definition |
---|---|
vw | Viewport width |
vh | Viewport height |
vi | Viewport inches |
vb | Viewport breadths |
dvw | Dynamic viewport width |
dvh | Dynamic viewport height |
dvi | Dynamic viewport inches |
dvb | Dynamic viewport breadths |
svw | Smallest possible viewport width |
svh | Smallest possible viewport height |
svi | Smallest possible viewport inches |
svb | Smallest possible viewport breadths |
lvw | Largest possible viewport width |
lvh | Largest possible viewport height |
lvi | Largest possible viewport inches |
lvb | Largest possible viewport breadths |
vmin | Smallest value between the viewport's width and height |
vmax | Largest value between the viewport's width and height |
Container
Unit | Definition |
---|---|
cqw | Container width |
cqh | Container height |
cqi | Container inches |
cqb | Container breadths |
cqmin | Smallest value between the element's parent container's width and height |
cqmax | Largests value between the element's parent container's width and height |