CSS Lengths


CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: relative and absolute.


Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's smaller dimension
vmax Relative to 1% of viewport's larger dimension
%  
px pixels (1px = 1/96th of 1in)

Example

<!DOCTYPE html>
    <html>
     <head>
        <style type="text/css">
        .p1{
        font-size:20px;
        }
        .p2{
        font-size:2em;
        }
        </style>
        </head>
        <body>
        <p class="p1">Font Size 20px</p>
        <p class="p2">Font Size 2em</p>
     </body>
    </html>
Output

Font Size 20px

Font Size 2em


Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Example

<!DOCTYPE html>
    <html>
     <head>
        <style type="text/css">
        .p1{
        font-size:5mm;
        }
        .p2{
        font-size:1cm;
        }
        </style>
        </head>
        <body>
        <p class="p1">Font Size 5mm</p>
        <p class="p2">Font Size 1cm</p>
     </body>
    </html>
Output

Font Size 5mm

Font Size 1cm


Share this article on