CSS Length Units

There are two kinds of units that can be applied to lengths in CSS. They are

Absolute
Relative

Absolute Length Units

Unit	Description	Example
cm	centimeters	font-size: 1cm;
mm	millimeters	font-size: 5mm;
in	inches (1in = 96px = 2.54cm)	font-size: 0.4in;
px *	pixels (1px = 1/96th of 1in)	font-size: 12px;
pt	points (1pt = 1/72 of 1in)	font-size: 5pt;
pc	picas (1pc = 12 pt)	font-size: 1pt;

Relative Length Units

Unit	Description	Example
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	font-size: 2em;
ex	Relative to the x-height of the current font (rarely used)	font-size: 3ex;
ch	Relative to the width of the “0” (zero)	font-size: 3ch;
rem	Relative to font-size of the root element	font-size: 2.5rem;
vw	Relative to 1% of the width of the viewport*	font-size: 3vw;
vh	Relative to 1% of the height of the viewport*	font-size: 2.5vh;
vmin	Relative to 1% of viewport’s* smaller dimension	font-size: 5vmin;
vmax	Relative to 1% of viewport’s* larger dimension	font-size: 1vmax;
%	Relative to the parent element	font-size: 3%;

Example for Absolute Length Units

In the following example, we set font-size for paragraphs with each of the absolute length units.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 1cm;
        }
        #p2 {
            font-size: 5mm;
        }
        #p3 {
            font-size: 0.6in;
        }
        #p4 {
            font-size: 16px;
        }
        #p5 {
            font-size: 16pt;
        }
        #p6 {
            font-size: 2pc;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World - 1cm</p>
    <p id="p2">Hello World - 5mm</p>
    <p id="p3">Hello World - 0.6in</p>
    <p id="p4">Hello World - 16px</p>
    <p id="p5">Hello World - 16pt</p>
    <p id="p6">Hello World - 2pc</p>
</body>
</html>

Example for Relative Length Units

In the following example, we set font-size for paragraphs with each of the relative length units.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 3em;
        }
        #p2 {
            font-size: 3ex;
        }
        #p3 {
            font-size: 3ch;
        }
        #p4 {
            font-size: 3rem;
        }
        #p5 {
            font-size: 3vw;
        }
        #p6 {
            font-size: 3vh;
        }
        #p7 {
            font-size: 3vmin;
        }
        #p8 {
            font-size: 3vax;
        }
        #p9 {
            font-size: 3%;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World - 3em</p>
    <p id="p2">Hello World - 3ex</p>
    <p id="p3">Hello World - 3ch</p>
    <p id="p4">Hello World - 3rem</p>
    <p id="p5">Hello World - 3vw</p>
    <p id="p6">Hello World - 3vh</p>
    <p id="p7">Hello World - 3vmin</p>
    <p id="p8">Hello World - 3vmax</p>
    <p id="p9">Hello World - 3%</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about length units in CSS, with examples.