Modifying an HTML document with JavaScript (Part 1)

CSS Measurement Units

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;
          }