CSS <dimension> Data Type

The CSS <dimension> data type represents a numeric value immediately followed by a unit. Dimensions are used throughout CSS to represent quantities such as lengths, angles, times, frequencies, and resolutions.

Syntax

A <dimension> consists of a <number> immediately followed by a unit identifier. There is no space between the number and its unit.

20px
1.5rem
45deg
250ms
96dpi

The unit determines the type and meaning of the dimension. For example, 20px is a length, 45deg is an angle, and 250ms is a time value.

<dimension> Types

CSS defines several specialized data types that represent different kinds of dimensions:

Data Type	Examples	Description
`<length>`	`20px`, `2rem`, `50vw`	Represents a distance or size.
`<angle>`	`45deg`, `0.5turn`	Represents an angle.
`<time>`	`2s`, `250ms`	Represents a duration.
`<frequency>`	`440Hz`, `1kHz`	Represents a frequency.
`<resolution>`	`96dpi`, `2dppx`	Represents a pixel density or resolution.

Numbers and Units

The numeric portion of a dimension can be an integer or a decimal value and can be positive, negative, or zero where the CSS feature permits it. The unit immediately following the number identifies how the value should be interpreted.

12px
-15deg
0.5s
1.25rem
300dpi

A dimension is different from a unitless <number> because its unit is part of the value. It is also different from a <percentage>, which uses a percentage sign and is represented by its own CSS data type.

Although many CSS properties allow a unit to be omitted from a zero value, a unitless 0 is a <number> rather than a <dimension>.

<dimension> Examples

Dimensions appear in many different CSS properties. The following declarations demonstrate several specialized dimension types:

.example {
  width: 300px;
  margin: 2rem;
  transform: rotate(15deg);
  transition-duration: 250ms;
}

In this example, 300px and 2rem are length dimensions, 15deg is an angle dimension, and 250ms is a time dimension.

Specifications

The <dimension> data type and its specialized dimension types are defined in the CSS Values and Units Module Level 4 .