HTML Dog
Skip to navigation

CSS Value: Length

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. padding: 10vmax;