CSS units

Jurgen 5 minutes to read

CSS length units fall into two broad categories: absolute units, which map to fixed physical or reference measurements, and relative units, which resolve in relation to something else — a font metric, a parent element, the viewport, or a container.

For front-end use it is widely accepted to use rem as the base unit, personally I seldom use px. If I do, most of the time it is in ascpect-ratio. From the newer units lh has quickly become one of my favourites. For mobile there is the ambivalent dvh. From the oldies it is em to use for proportional padding or margin.

Absolute units

Absolute units were part of CSS from the very beginning. All seven are defined in CSS1 (1996) and carried through CSS2 and into the current CSS Values and Units specification unchanged in meaning. They are anchored to real-world physical measures, with the pixel (px) defined as 1/96 of an inch — a reference unit from which all others are derived.

cm
One centimetre as defined by the SI system. Primarily used in print stylesheets.
mm
One tenth of a centimetre. Useful for fine-grained print measurements.
in
Inch. Equal to 96px, or 2.54cm. Print and high-resolution media.
pt
Point. 1/72 of an inch, or approximately 1.333px. The traditional unit of type size in print.
pc
Pica. 12 points, or 1/6 of an inch (16px). A larger print typographic unit.
px
Pixel. 1/96 of an inch in CSS terms — a reference pixel independent of the physical pixel density of the screen. The most commonly used absolute unit for screen work.
Q
Quarter millimetre. 0.25mm. Added in CSS Values Level 3 (around 2012, widely supported from 2019). Used in Japanese print typography where the Q is a conventional typographic unit.

Relative units

Relative units have been added in waves across the evolution of CSS, and span a much wider range of reference points. The earliest date to CSS1; the most recent arrived in 2023.

%
Percentage. CSS1. Always relative to some other value — typically the parent element’s corresponding dimension or the element’s own font size.
em
The computed font size of the element. CSS1. When used on font-size itself, resolves against the parent’s font size.
ex
The x-height of the element’s font — approximately the height of a lowercase “x”. CSS1.
ch
The width of the “0” (zero) character in the element’s font. CSS Values Level 3, widely supported from around 2014. Useful for sizing to a number of characters.
rem
Root em. The computed font size of the root element (<html>). CSS Values Level 3, widely supported from around 2013. Like em but without the compounding inheritance problem.
vw
1% of the viewport width. CSS Values Level 3, widely supported from around 2013.
vh
1% of the viewport height. CSS Values Level 3, widely supported from around 2013.
vmin
1% of the smaller of vw or vh. CSS Values Level 3, widely supported from around 2013.
vmax
1% of the larger of vw or vh. CSS Values Level 3, widely supported from around 2013.
fr
Fractional unit used in CSS Grid track sizing. Defined in CSS Grid Layout Level 1, widely supported from around 2017. Represents a fraction of the remaining space in a grid container.
vb
1% of the viewport’s block axis size (height in horizontal writing modes). CSS Values Level 4, widely supported from around 2021.
vi
1% of the viewport’s inline axis size (width in horizontal writing modes). CSS Values Level 4, widely supported from around 2021.
svh svw svi svb svmin svmax
Small viewport units. CSS Values Level 4, widely supported from 2022–2023. Sized to the smallest possible viewport — assumes dynamic browser UI (address bar etc.) is fully visible.
lvh lvw lvi lvb lvmin lvmax
Large viewport units. CSS Values Level 4, widely supported from 2022–2023. Sized to the largest possible viewport — assumes dynamic browser UI is fully retracted.
dvh dvw dvi dvb dvmin dvmax
Dynamic viewport units. CSS Values Level 4, widely supported from 2022–2023. Update in real time as the browser UI expands and retracts. The recommended replacement for vh in full-screen mobile layouts.
ic
The width of the CJK water ideograph (水, U+6C34) in the element’s font. CSS Values Level 4, widely supported from around 2022. The CJK counterpart to ch.
lh
The computed line-height of the element. CSS Values Level 4, widely supported from around 2023.
rlh
The computed line-height of the root element. CSS Values Level 4, widely supported from around 2023.
cap
The cap height of the element’s font — the approximate height of uppercase letters. CSS Values Level 4, widely supported from around 2023.
rcap
The cap height of the root element’s font. CSS Values Level 4, widely supported from around 2023.
rch
The width of the “0” character in the root element’s font. CSS Values Level 4, widely supported from around 2023.
rex
The x-height of the root element’s font. CSS Values Level 4, widely supported from around 2023.
ric
The width of the CJK water ideograph in the root element’s font. CSS Values Level 4, widely supported from around 2023.
cqw
1% of a container query container’s inline size (width). CSS Containment Level 3, widely supported from around 2023.
cqh
1% of a container query container’s block size (height). CSS Containment Level 3, widely supported from around 2023.
cqi
1% of a container query container’s inline axis size. CSS Containment Level 3, widely supported from around 2023.
cqb
1% of a container query container’s block axis size. CSS Containment Level 3, widely supported from around 2023.
cqmin
The smaller of cqi and cqb. CSS Containment Level 3, widely supported from around 2023.
cqmax
The larger of cqi and cqb. CSS Containment Level 3, widely supported from around 2023.