CSS Length

CSS uses a length data type that represents a distance or size value.

It is used by properties like, height, width, top, margin, and more.

Length values are either absolute or relative (see below).

Absolute Length

Absolute length units are fixed, irrespective of the device.
Examples include, pixels (px) and centimeters (cm).

This table lists all CSS absolute lengths.

Unit Description
 px Pixels. For screens 1px = 1 device pixel (i.e. dot). For printers and very high resolution screens 1px = 1/96th of 1in.
 pt Points. Mostly used for fonts and during printing. 1pt = 1/72 of 1in.
 pc Picas. Mostly used for fonts and during printing. 1pc = 12pt = 1/6th of 1in.
 cm Centimeters. 1cm = 96px/2.54.
 mm Millimeters. Sub-unit of cm. 1mm = 1/10th of 1cm.
 in Inches. 1in = 96px = 2.54cm.

Relative Length

Relative length units are relative to some other measure, such as parent element, device viewport, line-height, and others.

This table lists all CSS relative lengths.

Unit Description
 em Represents the font-size of the element.
Example: 1.5em is 50% larger than the current font.
 rem Represents the font-size of the root, usually the <html> element.
Browsers commonly set 1rem = 16px, but this can be changed.
 % Represents a percentage of the parent element.
Example: width:50% is 50% of the parent's width.
 vw Represents 1% of the viewport width.
Example: width:25vw is a quarter of the viewport width.
 vh Represents 1% of the viewport height.
Example: height:50vw is a half the viewport height.
 vmin Represents 1% of the viewport's smaller dimension (can be width or height).
 vmax Represents 1% of the viewport's larger dimension (can be width or height).
 ex Represents the x-height (height of lower-case x) of the current font.
 ch Represents the width of the "0" (zero) character.

Browser support for CSS Lengths

This table shows when CSS units support started for each browser.

px, %, * ch rem vh, vw vmin vmax
Chrome
1.0 27.0 4.0 20.0 20.0 26.0
Firefox
1.0 1.0 3.6 19.0 19.0 19.0
IE/Edge
3.0 9.0 9.0 9.0 12.0 16.0
Opera
3.5 20.0 11.6 20.0 20.0 20.0
Safari
1.0 7.0 4.1 6.0 6.0 7.0

* = px, %, em, ex, cm, mm, in, pt, and pc.


You may also like

Guides