CSS length units

• August 05 2024
• 8 min. read

Many CSS properties accept numbers as values. Whether these values are whole numbers, decimals, fractions or percentages. Whatever they are, the unit following a number determines its computed length.

So, what does the term length mean in the context of CSS as defined in the CSS Values and Units Module Level 4 specification?

“Length” means any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things!

Some examples of numbers:

/* Unitless numbers */
1

/* Pixels */
14px

/* em */
1.5em

/* rem */
3rem

/* Percentage */
50%

/* Characters */
650ch

/* Viewport units */
100vw
80vh
50dvh
50svh

/* Container units */
100cqi
50cqb

All these numbers, while different, do the same thing: define an element’s dimensions in CSS.

We need units in CSS because they determine how to size elements on a page, regardless of its function. Without them, the browser would have no way of knowing how to apply numbers to an element.

We'll look at different types of units and their associated values.

CSS uses many different types of numbers. Before we jump into discussing units that we attach to numbers, let's have a quick look at the numbers themselves:

Integers

When written literally, an integer is one or more decimal digits 0 through 9. The first digit of an integer may be immediately preceded by - or + to indicate the integer’s sign.

In the CSS specifications rounding to the nearest integer requires rounding in the direction of +∞ when the fractional portion is exactly 0.5. (For example, 1.5 rounds to 2, while -1.5 rounds to -1.)

Numbers

When written literally, a number is either an integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits, optionally, it can be concluded by the letter “e” or “E” followed by an integer indicating the base-ten exponent in scientific notation. It corresponds to the <number-token> production in the CSS Syntax Module.

As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.

Dimensions

The general term dimension refers to a number with a unit attached to it.

When written literally, a dimension is a number immediately followed by a unit identifier. Like keywords, unit identifiers are ASCII case-insensitive.

Ratios

Ratio values represent the ratio of two numeric values. It most often represents an aspect ratio, relating a width (first) to a height (second).

The second number is optional, defaulting to 1. However, <ratio> is always serialized with both components.

Percentages

Percentage values indicate a value that is some fraction of another reference value.

When written literally, a percentage consists of a number immediately followed by a percent sign %.

Percentage values are always relative to another quantity, for example, a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, or a measurement of the formatting context.

Types of units in the CSS Values and Units specification #

Absolute Units #

The absolute length units are fixed to each other and anchored to some physical measurement. They are mainly useful when the output environment is known.

Relative Units #

Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

List of units and what they represent #

Absolute units #

According to the specification:

All of the absolute length units are compatible, and px is their canonical unit (the unit that will be used for serializing these values).

For a CSS device, these dimensions are anchored either:

1. by relating the physical units to their physical measurements, or
2. by relating the pixel unit to the reference pixel.

For print media at typical viewing distances, the anchor unit should be one of the physical units (inches, centimeters, etc). For screen media (including high-resolution devices), low-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.

Font-relative units #

The font-relative lengths refer to the font metrics either of the element on which they are used (for the local font-relative lengths) or of the root element (for the root font-relative lengths).

You can also viewport units (discussed in the next section) to measure font sizes.

Viewport Units #

The viewport-percentage lengths are relative to the size of the initial containing block—​which is itself based on the size of either the viewport (for continuous media) or the page area (for paged media). When the height or width of the initial containing block is changed, they are scaled accordingly.

In addition to the "traditional" viewport units, the specification also defines small, large and dynamic viewports with their corresponding viewport units. See The large, small, and dynamic viewport units for more information.

• **s* ** units refer to small viewports
• **l* ** units refer to large viewports
• **d* ** units refer to dynamic viewports

Container units #

These units work with container queries.

Angle units #

Angle units indicate an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in gradients and some transform functions.

Time units #

Time units represent a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.

The conversion is 1s = 1000ms.

Fractional units #

The fr unit represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.

Resolution units #

Resolution units describe resolutions in media queries or the image-resolution property defined in the CSS Images Module Level 4 and describe the pixel density of an output device, i.e., its resolution.

On screens, the units are related to CSS inches, centimeters, or pixels, not physical values.

Frequency Units #

The frequency units represent a frequency dimension, such as the pitch of a speaking voice. They are not currently used in any CSS properties.

Links and resources #

• CSS Values and Units Module Level 4 specification
• CSS Length Units

• CSS,
• Length,
• Percentage,
• Measurements

Edit on Github