Back to TIL
February 2025
posted on 02.22.2025

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

UnitDefinition
%Percentage of the parent element's font size
emFont size of the element
exHeight of the element's font
chWidth of the "0" (zero) character of the element's font
capHight of the capital letters of the element's font
icAdvance measure of the CJK (Chinese/Japanese/Korean) character of the element's font
lhHeight of the element's line height

Root Relative

UnitDefinition
remFont size of the root element
rexHeight of the root element's font
rchWidth of the "0" (zero) character of the root element's font
rlhHeight of the root element's line height
ricAdvance measure of the CJK (Chinese/Japanese/Korean) character of the root element's font
rcapHeight of the capital letters of the root element's font

Absolute

UnitDefinition
pxPixels
ptPoints
pcPicas
inInches
cmCentimeters
mmMillimeters
QQuarter-millimeters

Viewport

UnitDefinition
vwViewport width
vhViewport height
viViewport inches
vbViewport breadths
dvwDynamic viewport width
dvhDynamic viewport height
dviDynamic viewport inches
dvbDynamic viewport breadths
svwSmallest possible viewport width
svhSmallest possible viewport height
sviSmallest possible viewport inches
svbSmallest possible viewport breadths
lvwLargest possible viewport width
lvhLargest possible viewport height
lviLargest possible viewport inches
lvbLargest possible viewport breadths
vminSmallest value between the viewport's width and height
vmaxLargest value between the viewport's width and height

Container

See CSS Container Queries.

UnitDefinition
cqwContainer width
cqhContainer height
cqiContainer inches
cqbContainer breadths
cqminSmallest value between the element's parent container's width and height
cqmaxLargests value between the element's parent container's width and height
No reactions yet

in Naperville, IL
Last visitor from Mitaka, Japan