Numbers & units

<number>

A real number, with or without a fractional part, and optionally signed: 1, 0.5, -2, .75. Scientific notation such as 1e3 is also allowed.

A property may restrict the range, written in its grammar as <number [0,∞]> for a non-negative number. A unitless line-height is a <number> that multiplies the font size, and is inherited as the factor rather than as a fixed length.

<integer>

A whole number, positive, negative or zero, with no fractional part: 3, -1, 0.

The grammar means a number token that has no decimal point and no exponent. 1.0 is a <number>, not an <integer>, so z-index: 1.0 is invalid.

<percentage>

A number followed by %, standing for a fraction of some reference value. Each property says what its percentages refer to, such as the containing block's width or the element's own font size.

<ratio>

Two non-negative numbers separated by a slash, most often an aspect ratio of width to height. If the second number is left out it is taken as 1.

aspect-ratio: 16 / 9;
aspect-ratio: 1; /* the same as 1 / 1 */

<dimension>

The general name for a number with a unit attached, such as 12px or 90deg. It is not used directly in property grammars; it is the shared form behind <length>, <angle>, <time>, <resolution> and <flex>.

Unit names are case-insensitive, so 10PX is the same as 10px.

<length>

A distance: a number followed by one of the length units below. A length of zero may be written without a unit; any other bare number is not a length.

On phones, 100vh is the large viewport and can run under the address bar; 100svh always fits, and 100dvh tracks the bar as it moves. Container units fall back to the small viewport units when there is no eligible container. See container-type.

min-height: 100svh;
max-width: 65ch;
padding-block: 1lh;

<length-percentage>

Either a <length> or a <percentage>, or a calc() that mixes the two, such as calc(100% - 2rem). The percentage resolves against whatever the property names.

<angle>

A rotation or direction: a number followed by an angle unit. Positive angles turn clockwise. Some places, such as gradient angles, also accept a unitless 0.

<angle-percentage>

Either an <angle> or a <percentage> of a full turn, as used by the colour stops of a conic gradient.

<time>

A duration or delay: a number followed by s (seconds) or ms (milliseconds). The unit is required, even for zero, so write 0s.

Durations cannot be negative. A negative delay is allowed and starts the animation part-way through.

<resolution>

The pixel density of an output device or an image: how many dots fit into a given length.

@media (resolution >= 2x) { … }

<flex>

A fraction of the free space in a grid container, written with the fr unit. After fixed and content-sized tracks are laid out, the leftover space is shared among the flexible tracks in proportion to their fr values.

A <flex> is not a <length>: it cannot be mixed with other units inside calc().

grid-template-columns: 200px 1fr 2fr;