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.
