CSS 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 –

Absolute

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

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;}

Relative

Sr NoUnitDescriptionExample
1%
Defines a measurement as a percentage relative to another value
p {line-height: 25%;}
2em
A relative measurement to the font-size of the element (2em = 2 x size of the current font)
p {letter-spacing: 5em;}
3ex
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;}
4vh
1% of viewport height
h2 {font-size: 2.0vh; }
5vw
1% of viewport width
h1 {font-size: 5.6vw; }
6vmin
Smaller one from 1vw or 1vh
p {font-size: 1vmin;}
7vmax

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