CSS Measurement Units

There are many different CSS measurement units, some relative and some absolute. In this tutorial we are going to be talking about all CSS measurement units.

%

This is a relative unit that defines a measurement as a percentage of another value, usually a parent element.

      body {
            background-color:black;
            color:aqua;
            line-height:200%;
         }
          
      code {
          color:red;
          }                

Css measurement example output

cm

This is an absolute unit that defines a measurement in centimeters.

body {
            background-color:black;
            color:aqua;
         }
         
         h1 {
         margin-bottom:2cm;
         text-align:center;
         }
          
          code {
          color:red;
          }                

Css measurement example output


em

This is a measurement relative to the set font size. 1 em is equivalent to the size of a given font, which means if the font size is 16pt, each "em" unit would be equal to 16pt, 2em would be 32pt and so on.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         letter-spacing:0.2em;
         text-align:center;
         }
          
          code {
          color:red;
          font-size:0.9em;
          }                

Css measurement example output

ex

This measurement unit is relative to the font’s lowercase letter x.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         letter-spacing:0.2ex;
         text-align:center;
         }
          
          code {
          color:red;
          font-size:2ex;
          }               

Css measurement example output

in

Defines an absolute measurement in inches.

		body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         margin-top:1in;
         text-align:center;
         }
          
          code {
          color:red;
          }

Css measurement example output

mm

Defines an absolute measurement in millimeters.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :1mm solid #230387;
         color:fuchsia;
         }
          
          code {
          color:red;
          }                

Css measurement example output


pt

Defines an absolute measurement in points whereby 72 points is equivalent to 1 inch.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2pt solid #230387;
         padding:12pt;
         color:fuchsia;
         }
          
          code {
          color:red;
          }                

Css measurement example output

pc

Defines an absolute measurement in picas whereby 1 pica is equivalent to 12 points; meaning that there are 6 picas in 1 inch.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2pc solid #230387;
         padding:12pc;
         color:fuchsia;
         }
          
          code {
          color:red;
          }              

Css measurement example output

px

Defines a measurement in screen pixels.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2px solid #230387;
         padding:12px;
         color:fuchsia;
         }
          
          code {
          color:red;
          }                

Css measurement example output

vh

Defines a measurement relative to the viewport height whereby 1vh is 1% of viewport height.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2vh solid #230387;
         padding:12vh;
         color:fuchsia;
         }
          
          code {
          color:red;
          }               

Css measurement example output


vw

Defines a measurement relative to the viewport width whereby 1vw is 1% of viewport width.

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2vw solid #230387;
         padding:12vw;
         color:fuchsia;
         }
          
          code {
          color:red;
          }                

vmin

Defines a measurement as vw or vh, whichever is smaller

body {
            background-color:black;
            color:aqua;
         }
         
         
         h1 {
         text-align:center;
         border :2vmin solid #230387;
         padding:12vmin;
         color:fuchsia;
         }
          
          code {
          color:red;
          }