A <dimension>
is a <number>
with a unit attached to it, for example 45deg
, 100ms
, or 10px
. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm
is not valid.
CSS uses dimensions to specify:
These are all covered in subsections below.
Distance units
Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the <length>
type. There are two types of lengths in CSS: relative and absolute.
Relative length units specify a length in relation to something else. For example, em
is relative to the font size on the element and vh
is relative to the viewport height.
Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm
is a physical millimeter, 1/10th of a centimeter.
When including a length value, if the length is 0
, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.
Angle units
Angle values are represented by the type <angle>
and accept the following values:
Time units
Time values are represented by the type <time>
. When including a time value, the unit identifier — the s
or ms
— is required. It accepts the following values.
Frequency units
Frequency values are represented by the type <frequency>
. It accepts the following values.
1Hz
, which can also be written as 1hz
or 1HZ
, is one cycle per second.
Flex units
Flex units are represented by the type <flex>
. It accepts the following value.
Resolution units
Resolution units are represented by the type <resolution>
. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values: