CSS Units

CSS Units

CSS units define measurements used with many CSS properties. They can control font sizes, widths, heights, margins, padding, borders, and other dimensions. Some units use fixed measurements, while others are calculated relative to another size.

Using CSS Units

Many CSS values combine a number with a unit of measurement. The unit tells the browser how the number should be interpreted.

p {
  font-size: 18px;
  margin-bottom: 1rem;
}

In this example, 18px and 1rem are length values. The numbers specify the amount, while px and rem specify how those amounts are measured.

There should be no space between the number and the unit. Write 18px, not 18 px.

Absolute and Relative Units

CSS length units are generally described as absolute or relative. Absolute units represent measurements without depending on another CSS length, while relative units are calculated in relation to another measurement.

For screen-based web pages, px is the absolute unit beginners encounter most often. Relative units such as rem, em, and percentages change according to the value they are relative to.

The px Unit

The px unit represents CSS pixels and is commonly used for dimensions such as borders, spacing, and sizes.

p {
  font-size: 16px;
}

A value written in pixels does not become larger or smaller simply because the root element's CSS font-size changes. For example, 16px remains 16px when the root font size changes from 16px to 20px.

The rem Unit

The rem unit is relative to the font size of the document's root <html> element. The name can be thought of as root em.

html {
  font-size: 16px;
}

p {
  font-size: 2rem;
}

With a root font size of 16px, 2rem calculates to 32px. If the root font size changes to 20px, the same 2rem value calculates to 40px.

Because rem values share the same root reference, they can make relationships between sizes easier to understand across a document.

The em Unit

The em unit is relative to a font size. When em is used for the font-size property, its value is calculated from the font size inherited from the parent.

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

The child has a calculated font size of 40px because 2em is twice the parent's 20px font size.

This relationship becomes important when elements are nested. An em value can produce different calculated sizes depending on the font size inherited by each element.

The Percentage Unit

Percentages are relative values, but what they are relative to depends on the CSS property. For font-size, a percentage is calculated relative to the inherited font size.

.parent {
  font-size: 20px;
}

.child {
  font-size: 200%;
}

In this example, the child's font size calculates to 40px. For font sizing, 200% behaves like 2em because both are calculated from the inherited font size.

Percentages used with other properties may be calculated from something different, so a percentage does not always refer to the parent element's font size.

Comparing Font Size Units

The differences between px, rem, em, and percentages are easier to understand when you can see them change. The following example lets you adjust the root font size and compare how each unit responds.

Move the slider to change the font-size of the <html> element. Watch the main text and nested text in each example as the root font size changes.

The pixel example remains the same size because its font sizes are explicitly set in pixels. The rem example changes with the root font size, while its nested text continues to use the same root reference.

The em and percentage examples also respond to the change, but their nested text is calculated from the font size of its parent. This demonstrates why nested relative font sizes can behave differently from rem.

Other Relative Units

CSS provides many other relative units. Two commonly encountered units are vw and vh, which are based on the size of the viewport.

.example {
  width: 50vw;
  min-height: 25vh;
}

1vw represents one percent of the viewport width, while 1vh represents one percent of the viewport height. Therefore, 50vw represents half the viewport width and 25vh represents one quarter of the viewport height.

CSS includes additional relative units for typography, viewport dimensions, and other measurements. You do not need to memorize all of them to begin working with HTML and basic CSS.

Unitless Values

Not every numeric CSS value requires a unit. Some properties accept unitless numbers.

p {
  line-height: 1.5;
  opacity: 0.8;
}

The values 1.5 and 0.8 do not use units. Whether a unit is required depends on the CSS property and the type of value it accepts.

Zero-length values can generally be written as simply 0 without a unit.

Choosing CSS Units

There is no single CSS unit that is best for every situation. The appropriate unit depends on what is being measured and how you want that measurement to respond when other sizes change.

Pixels are useful when a measurement should be expressed directly in CSS pixels. Root-relative rem values are useful when sizes should share a common relationship with the root font size. em and percentages are useful when a value should relate to the font size or another measurement in its local context.

As you work with CSS, the important question is not simply which unit is better, but what should this measurement be relative to? Once you know that, choosing an appropriate unit becomes much easier.

Summary

CSS units tell the browser how numeric measurements should be interpreted. Common units include px, rem, em, percentages, and viewport-relative units such as vw and vh.

Some measurements remain independent of font-size relationships, while relative units change according to another value. Understanding what each unit is relative to is the key to understanding how CSS measurements behave.