CSS Length Units

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

  • Absolute
  • Relative

Absolute Length Units

UnitDescriptionExample
cmcentimetersfont-size: 1cm;
mmmillimetersfont-size: 5mm;
ininches (1in = 96px = 2.54cm)font-size: 0.4in;
px *pixels (1px = 1/96th of 1in)font-size: 12px;
ptpoints (1pt = 1/72 of 1in)font-size: 5pt;
pcpicas (1pc = 12 pt)font-size: 1pt;

Relative Length Units

UnitDescriptionExample
emRelative to the font-size of the element (2em means 2 times the size of the current font)font-size: 2em;
exRelative to the x-height of the current font (rarely used)font-size: 3ex;
chRelative to the width of the “0” (zero)font-size: 3ch;
remRelative to font-size of the root elementfont-size: 2.5rem;
vwRelative to 1% of the width of the viewport*font-size: 3vw;
vhRelative to 1% of the height of the viewport*font-size: 2.5vh;
vminRelative to 1% of viewport’s* smaller dimensionfont-size: 5vmin;
vmaxRelative to 1% of viewport’s* larger dimensionfont-size: 1vmax;
%Relative to the parent elementfont-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

</>
Copy
<!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

</>
Copy
<!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.