A measurement of distance. Lengths take the form of a number followed by one of various absolute or relative unit abbreviations.

Absolute lengths

Unit

Description

Example

px

Reference pixel. Typically equal to a physical pixel (one of the light-emitting dots that make up a monitor screen, for example) although may be more on high-resolution displays or if a page is zoomed.

margin-left: 50px;

in

Inch. One inch, assuming display pixel density is 96dpi (so 1in is equal to 96px).

width: 4in;

pc

Pica. 1/6 of an inch (so 1pc is equal to 0.167in, or 16px).

width: 24pc;

pt

Point. 1/72 of an inch (so 1pc is equal to 0.014in, or 1.333px).

font-size: 14pt;

cm

Centimeter. One centimeter, assuming display pixel density is 96dpi (so 1cm is equal to 37.795px).

height: 7cm;

mm

Millimeter. 1/10 of a centimeter (so 1mm is equal to 0.1cm, or 3.780px).

height: 70mm;

q

Quarter-millimeter. 1/40 of a centimeter (so 1mm is equal to 0.025cm, or 0.945px).

height: 280q;

Relative lengths

Font-relative

Unit

Description

Example

em

Em. The computed value of the font-size property of a box. If used on font-size itself, it is the computed value of the inherited font size.

font-size: 1.5em;

ex

X-height. Typically equal to the height of a lower-case “x” character. If this can not be calculated, it is equal to 0.5em.

line-height: 3ex;

ch

Character. Typically equal to the width of a “0” character. If this can not be calculated, it is equal to 0.5em.

font-size: 2ch;

rem

Root em. The computed value of the font-size property of the root element box. If used on font-size itself, it is the initial font size.

width: 20rem;

Viewport-percentage

Unit

Description

Example

vw

Viewport width. Equal to 1% of the width of the viewport.

width: 50vw;

vh

Viewport height. Equal to 1% of the height of the viewport.

line-height: 10vh;

vmin

Viewport minimum. Equal to vw or vh — whichever is smaller.

margin: 5vmin;

vmax

Viewport maximum. Equal to vw or vh — whichever is larger.