CSS Absolute and Relative Units

Several CSS properties like height, width, margin, font-size etc. requires length values. To express these lengths, CSS supports two types of units namely, absolute and relative.

Absolute length units are static irrespective of the screen size and hence are used when the output display size is known, like the print layout.

Relative length units are specified with respect to another length property. These are the most used ones as they adjust accordingly with the different rendering mediums.

The unit needs to be specified with the length value without any whitespace between them. However, value ‘0’ is an exception.

Negative lengths are also acceptable for some CSS properties.

Here is the complete list of measuring units in CSS –

1 CSS Absolute Units

Sr NoUnitDescriptionExample
Defines a measurement in centimeters
div {margin-top: 1cm;}
Defines a measurement in millimeters
p {word-spacing: 10mm;}
Defines a measurement in inches
p {word-spacing: .10in;}
Defines a measurement in screen pixels
p {padding-top: 20px;}

Defines a measurement in points. (1 point = 1/72nd of an inch)
body {font-size: 16pt;}

6pcDefines a measurement in picas. (1 pica = 12 points = 6 picas per inch)
p {font-size: 16pc;}

2 CSS Relative Units

Sr NoUnitDescriptionExample
Defines a measurement as a percentage relative to another value
p {line-height: 25%;}
A relative measurement to the font-size of the element (2em = 2 x size of the current font)
p {letter-spacing: 5em;}
A relative measurement to the x-height of the current font (x-height = height of the font's lowercase letter x)
p {line-height: 5ex;}
1% of viewport height
h2 {font-size: 2.0vh; }
1% of viewport width
h1 {font-size: 5.6vw; }
Smaller one from 1vw or 1vh
p {font-size: 1vmin;}

Larger one from 1vw or 1vh
h1 {font-size: 15vmax;}
Relative to width of the "0" (zero)
div {font-size: 3ch; }
9remRelative to font-size of the root element
div {font-size: 2rem; }