Css Units Cheat Sheet

Long gone are the days when we used to use only ‘px’ (pixels) in our CSS. Today there are a lot of options to choose from. What unit you choose depends on the context, some should be used for text, some for containers, some for print.

UnitNameEquivalent toRelative to
cmcentimeters1cm = 37.8px = 25.2/64inAbsolute (Used for print)
mmmillimeters1mm = 1/10th of 1cmAbsolute (Used for print)
Qquarter-millimeters1Q = 1/40th of 1cmAbsolute (Used for print in Japan)
ininches1in = 2.54cm = 96pxAbsolute (Used for print)
pcpicas1pc = 1/6th of 1inAbsolute (Used for print)
ptpoints1pt = 1/72th of 1inAbsolute (Used for print)
pxpixels1px = 1/96th of 1inAbsolute
emparent font size1em = parent font sizeFont
remfont size of the root element1rem = size of root elementFont
exheight of letter ‘x’1ex = height of the glyph ‘x’Font
rexheight of root letter ‘x’1rex = height of the root element glyph ‘x’Font
chwidth of number 01ch = width of glyph ‘0’Font
rchwidth of root number 01ch = width of root element glyph ‘0’Font
icwidth of gliph 水1ic = witht of glyph ‘水’Font
ricwidth of root gliph 水1ic = witht of root element glyph ‘水’Font
capheight of capital letters1cap = height of a capital letterFont
rcapheight of root capital letters1cap = height of a root element capital letterFont
lhline height of the element1lh = height of the text lineFont
rlhline height of the root element1rlh = height of the root text lineFont
vwdefault viewport width1vw = 1% of the default viewport’s width.Viewport
vhdefault viewport height1vh = 1% of the default viewport’s height.Viewport
videfault viewport inline size1vi = 1% of the size of the viewport in the inline directionViewport
vbdefault viewport box size1vb = 1% of the size of the viewport in the block direction.Viewport
vmindefault viewport minimum dimension1vmin = 1% of the default viewport’s smaller dimension.Viewport
vmaxdefault viewport maximum dimension1vmax = 1% of the default viewport’s larger dimension.Viewport
lvwlarge viewport width1lvw = 1% of the large viewport’s width.Viewport
lvhlarge viewport height1lvh = 1% of the large viewport’s height.Viewport
lvminlarge viewport minimum dimension1lvmin = 1% of the large viewport’s smaller dimension.Viewport
lvmaxlarge viewport maximum dimension1lvmax = 1% of the large viewport’s larger dimension.Viewport
svwsmall viewport width1svw = 1% of the small viewport’s width.Viewport
svhsmall viewport height1svh = 1% of the small viewport’s height.Viewport
svminsmall viewport minimum dimension1svmin = 1% of the small viewport’s smaller dimension.Viewport
svmaxsmall viewport maximum dimension1svmax = 1% of the small viewport’s larger dimension.Viewport
dvwdynamic viewport width1dvw = 1% of the dynamic viewport’s width.Viewport
dvhdynamic viewport height1dvh = 1% of the dynamic viewport’s height.Viewport
dvmindynamic viewport minimum dimension1dvmin = 1% of the dynamic viewport’s smaller dimension.Viewport
dvmaxdynamic viewport maximum dimension1dvmax = 1% of the dynamic viewport’s larger dimension.Viewport
degdegrees1deg = 1/360 of a full circleCircle
gradgradians1grad = 1/400 of a full circleCircle
radradians1rad = 1/2π of a full circleCircle
turnturn1turn = a full circleCircle
ssecond1s = 1/60 of a minute durationTime
msmillisecond1ms = 1/1000 of a second durationTime
HzHertz1Hz = one occurrence per secondN/a
kHzkilloHertz1kHz = 1000HzN/a
dpidots per inch1dpi = one dot per inchResolution
dpcmdots per centimeter1dpcm = one dot per centimeterResolution
dppxdots per pixel1dpcm = one dot per pixelResolution
frflex fraction1fr = a fraction of available free spaceGrid layout only

Soon there will also be container relative units:

UnitNameEquivalent toRelative to
cqwcontainer width1% of a query container’s widthContainer
cqhcontainer height1% of a query container’s heightContainer
cqicontainer inline size1% of a query container’s inline sizeContainer
cqbcontainer block size1% of a query container’s block sizeContainer
cqmincontainer minimum sizeThe smaller value of cqi or cqbContainer
cqmaxcontainer maximum sizeThe larger value of cqi or cqbContainer

Using Multiple Units Together with Css Functions

CSS has some very useful functions that can determine values by using a single unit or multiple units. Here are some examples:

Calc

You can use calc() function to determine a dimension using multiple units:

width: calc(100% - 16px) 

The width is calculated dynamically by subtracting 16px from the maximum width.

Clamp

clamp() function accepts a minimum, an ideal and a maximum value. All those units can be different if necessary:

font-size: clamp(18px, 4vw, 3rem)

The font size will be a minimum of 18px, a maximum of 3rem and 4vw in the rest.

Min and Max

min() and max() are two functions that can limit a value depending on context:

width: min(100vw - 3rem, 80ch)

Here the width will be the minimum between 100vw - 3rem and 80ch. On different screen sizes, there will be a different minimum.

Minmax

There is also minmax() function that defines a range of values:

width: minmax(30ch, 80ch)

In this case the width will have a minium value of 30ch, a maximum of 80ch and any value between.

Resources