CSS <length> Data Type

The CSS <length> data type denotes distance measurements using relative or absolute units.

The <length> data type is a dimension, so it consists of a valid number immediately followed by a unit identifier (with no space between the number and the unit identifier).

When you see <length> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be any valid length.

For example, the font-size property accepts the following value types:

Which means that <length> is one of the accepted types.

So you could do something like this:

Which will result in this:

View Output Full Screen Preview

Accepted Units

The <length> type can use any of the following units.

Relative Lengths

Relative length units specify a length relative to another length.

em
Relative to the font size of the element. An em is equal to the computed value of the font-size property of the element on which it is used.
ex
Relative to the used x-height of the first available font.
ch
Relative to the width of the "0" (U+0030) glyph in the element's font.
rem
Relative to the font size of the root element (usually the HTML element).
vw
Relative to 1% of the viewport's initial containing block width.
vh
Relative to 1% of the viewport's initial containing block height.
vmin
Relative to 1% of the viewport's smaller dimension (i.e. equal to the smaller of vw or vh).
vmax
Relative to 1% of the viewport's larger dimension (i.e. equal to the larger of vw or vh).
svh, svw
Small viewport size units, relative to the viewport size when auxiliary UI (such as dynamic address bars) is expanded.
lvh, lvw
Large viewport size units, relative to the viewport size when auxiliary UI is hidden.
dvh, dvw
Dynamic viewport size units, adjusting dynamically as auxiliary UI appears or disappears.

Absolute Lengths

cm
Centimeters. 1cm is the equivalent of 96px/2.54.
mm
Millimeters. 1mm is the equivalent of 1/10th of 1cm
Q
Quarter-millimeters. 1q is the equivalent of 1/40th of 1cm.
in
Inches. 1in = 2.54cm is the equivalent of 96px.
pc
Picas. 1pc is the equivalent of 1/6th of 1in.
pt
Points. 1pt is the equivalent of 1/72th of 1in.
px
Pixels. 1px is the equivalent of 1/96th of 1in.

So the following are all examples of valid <length> values:

CSS Specifications