CSS <length> Data Type

The CSS <length> data type represents a distance. A length consists of a numeric value followed by a length unit, such as px, em, rem, vw, or cm. CSS provides both absolute and relative length units for sizing, spacing, positioning, and other measurements.

Syntax

A <length> normally combines a <number> with a CSS length unit:

20px
1.5rem
2em
50vw
25cqw
10cm

Length values can be positive or negative when the CSS property using the value permits negative lengths.

Absolute Length Units

Absolute length units have fixed relationships to one another. CSS defines the following absolute length units:

Unit	Name	Relationship
`px`	Pixel	`1px = 1/96in`
`cm`	Centimeter	`1cm = 96px / 2.54`
`mm`	Millimeter	`1mm = 1/10cm`
`Q`	Quarter-millimeter	`1Q = 1/40cm`
`in`	Inch	`1in = 96px`
`pc`	Pica	`1pc = 1/6in`
`pt`	Point	`1pt = 1/72in`

Relative Length Units

Relative length units are calculated in relation to another measurement, such as a font size, line height, viewport, or query container. Font-relative units include:

Unit	Relative To
`em`	The relevant element's font size, with the exact reference depending on the property where it is used
`rem`	The root element's font size
`ex`	The x-height of the relevant font
`rex`	The x-height of the root element's font
`cap`	The cap height of the relevant font
`rcap`	The cap height of the root element's font
`ch`	The advance measure of the `0` glyph in the relevant font
`rch`	The advance measure of the `0` glyph in the root element's font
`ic`	The advance measure of the 水 glyph in the relevant font
`ric`	The advance measure of the 水 glyph in the root element's font
`lh`	The computed line height of the element
`rlh`	The computed line height of the root element

Viewport Length Units

Viewport-percentage length units are relative to the dimensions of the viewport. CSS provides physical and logical viewport units, along with small, large, and dynamic viewport variants.

Units	Relative To
`vw`, `svw`, `lvw`, `dvw`	1% of the applicable viewport width
`vh`, `svh`, `lvh`, `dvh`	1% of the applicable viewport height
`vi`, `svi`, `lvi`, `dvi`	1% of the applicable viewport size in the inline axis
`vb`, `svb`, `lvb`, `dvb`	1% of the applicable viewport size in the block axis
`vmin`, `svmin`, `lvmin`, `dvmin`	The smaller of the corresponding viewport width and height values
`vmax`, `svmax`, `lvmax`, `dvmax`	The larger of the corresponding viewport width and height values

Container Query Length Units

Container query length units are relative to the dimensions of a query container. Each unit represents 1% of the corresponding container dimension.

Unit	Relative To
`cqw`	1% of the query container's width
`cqh`	1% of the query container's height
`cqi`	1% of the query container's inline size
`cqb`	1% of the query container's block size
`cqmin`	The smaller of `cqi` and `cqb`
`cqmax`	The larger of `cqi` and `cqb`

Zero Values

A length of zero can generally be written without a unit when a property accepts a length. For example, 0 can normally be used instead of 0px, 0em, or another zero length.

.example {
  margin: 0;
  padding: 0;
}

Using unitless 0 is common because all zero lengths represent the same distance regardless of the unit.

<length> Example

The following example uses several types of CSS length values:

.example {
  width: 300px;
  min-height: 10rem;
  padding: 2em;
  margin-top: 5vh;
}

Browser Result

CSS length values control measurements such as width, height, padding, and margins.

The <length> data type is used by many CSS properties, including:

Specifications

The <length> data type is defined in the CSS Values and Units Module Level 4 .

CSS <length> Data Type