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 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 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. |
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.
