CSS Units

CSS Units

CSS has several different units for expressing a length.

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

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

Absolute Lengths

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

• cm - centimeters
• mm - millimeters
• in - inches (1in = 96px = 2.54cm)
• px - pixels (1px = 1/96th of 1in)
• pt - points (1pt = 1/72 of 1in)
• pc - picas (1pc = 12 pt)

Relative Lengths

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

• em - Relative to the font-size of the element (2em means 2 times the size of the current font)
• 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*
• % - Relative to the parent element

Example 1: Pixels (px)

Example 2: Em

Example 3: Rem

h1 {
  font-size: 60px;
}

p {
  font-size: 2em;
  line-height: 1.5em;
}