CSS Length Units

CSS provides multiple length units. I've divided all length units into following two categories:

Absolute length units
Relative length units

Absolute Length Units in CSS

Absolute length units are those units that are not actually measured in comparison with something else.

List of absolute length units in CSS:

mm - millimeters
cm - centimeters
in - inches
px - pixels
pt - points
pc - picas

Note - 1 inch is equal to 2.54 centimeters or 96 pixels or 72 points.

Note - 1 picas is equal to 12 points.

Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      span.one {font-size: 4mm;}
      span.two {font-size: 10mm;}
      span.three {font-size: 0.4cm;}
      span.four {font-size: 1cm;}
      span.five {font-size: 0.16in;}
      span.six {font-size: 0.4in;}
      span.seven {font-size: 16px;}
      span.eight {font-size: 40px;}
      span.nine {font-size: 12pt;}
      span.ten {font-size: 30pt;}
      span.eleven {font-size: 1pc;}
      span.twelve {font-size: 2.5pc;}
   </style>
</head>
<body>

   <p>This is <span class="one">Absolute Unit</span> @4mm</p>
   <p>This is <span class="two">Absolute Unit</span> @10mm</p>

   <p>This is <span class="three">Absolute Unit</span> @0.4cm</p>
   <p>This is <span class="four">Absolute Unit</span> @1cm</p>

   <p>This is <span class="five">Absolute Unit</span> @0.2in</p>
   <p>This is <span class="six">Absolute Unit</span> @0.4in</p>

   <p>This is <span class="seven">Absolute Unit</span> @16px</p>
   <p>This is <span class="eight">Absolute Unit</span> @40px</p>

   <p>This is <span class="nine">Absolute Unit</span> @12pt</p>
   <p>This is <span class="ten">Absolute Unit</span> @30pt</p>

   <p>This is <span class="eleven">Absolute Unit</span> @1pc</p>
   <p>This is <span class="twelve">Absolute Unit</span> @2.5pc</p>

</body>
</html>

Output

This is Absolute Unit @4mm

This is Absolute Unit @10mm

This is Absolute Unit @0.4cm

This is Absolute Unit @1cm

This is Absolute Unit @0.2in

This is Absolute Unit @0.4in

This is Absolute Unit @16px

This is Absolute Unit @40px

This is Absolute Unit @12pt

This is Absolute Unit @30pt

This is Absolute Unit @1pc

This is Absolute Unit @2.5pc

Relative Length Units in CSS

Relative length units are those units that are measured relatively. List of relative length units in CSS are:

% - relative to parent element
rem - relative to root element's font
em - relative to element's current font-size. Therefore 1.5em means 1.5 times the size of the current font
ex - relative to x-height of current font. The x-height refers to the distance between the baseline and the mean line of lower-case letters
ch - relative to width of character 0
vw - relative to 1% of viewport's width. The viewport is the viewing region of web page
vh - relative to 1% of viewport's height
vmin - relative to 1% of viewport's smaller dimension
vmax - relative to 1% of viewport's larger dimension

Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      span.one {font-size: 100%;}
      span.two {font-size: 200%;}
      span.three {font-size: 1rem;}
      span.four {font-size: 2rem;}
      span.five {font-size: 1em;}
      span.six {font-size: 2em;}
      span.seven {font-size: 2.4ex;}
      span.eight {font-size: 4.8ex;}
      span.nine {font-size: 2ch;}
      span.ten {font-size: 4ch;}
      span.eleven {font-size: 1vw;}
      span.twelve {font-size: 2vw;}
      span.thirteen {font-size: 2vh;}
      span.fourteen {font-size: 4vh;}
      span.fifteen {font-size: 2vmin;}
      span.sixteen {font-size: 4vmin;}
      span.seventeen {font-size: 1vmax;}
      span.eighteen {font-size: 2vmax;}
   </style>
</head>
<body>

   <p>This is <span class="one">Relative Unit</span> @100%</p>
   <p>This is <span class="two">Relative Unit</span> @200%</p>
   
   <p>This is <span class="three">Relative Unit</span> @1rem</p>
   <p>This is <span class="four">Relative Unit</span> @2rem</p>

   <p>This is <span class="five">Relative Unit</span> @1em</p>
   <p>This is <span class="six">Relative Unit</span> @2em</p>

   <p>This is <span class="seven">Relative Unit</span> @2.4ex</p>
   <p>This is <span class="eight">Relative Unit</span> @4.8ex</p>

   <p>This is <span class="nine">Relative Unit</span> @2ch</p>
   <p>This is <span class="ten">Relative Unit</span> @4ch</p>

   <p>This is <span class="eleven">Relative Unit</span> @1vw</p>
   <p>This is <span class="twelve">Relative Unit</span> @2vw</p>
   
   <p>This is <span class="thirteen">Relative Unit</span> @2vh</p>
   <p>This is <span class="fourteen">Relative Unit</span> @4vh</p>

   <p>This is <span class="fifteen">Relative Unit</span> @2vmin</p>
   <p>This is <span class="sixteen">Relative Unit</span> @4vmin</p>

   <p>This is <span class="seventeen">Relative Unit</span> @1vmax</p>
   <p>This is <span class="eighteen">Relative Unit</span> @2vmax</p>

</body>
</html>

Output

This is Relative Unit @100%

This is Relative Unit @200%

This is Relative Unit @1rem

This is Relative Unit @2rem

This is Relative Unit @1em

This is Relative Unit @2em

This is Relative Unit @2.4ex

This is Relative Unit @4.8ex

This is Relative Unit @2ch

This is Relative Unit @4ch

This is Relative Unit @1vw

This is Relative Unit @2vw

This is Relative Unit @2vh

This is Relative Unit @4vh

This is Relative Unit @2vmin

This is Relative Unit @4vmin

This is Relative Unit @1vmax

This is Relative Unit @2vmax

CSS Online Test

« CSS Tutorial fresherearth »