CSS Units

One of the things you’ll use every day in CSS are units. They are used to set lengths, paddings, margins, align elements and so on.

Things like px, em, rem, or percentages.

They are everywhere. There are some relatively unknown ones, too.

Pixels

The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices).

There is a convention that make this unit work consistently across devices.

Percentages

Another very useful measure, percentages let you specify values in percentages of that parent element’s corresponding property.

Example:

.parent {
  width: 400px;
}

.child {
  width: 50%; /* = 200px */
}

Real-world measurement units

We have those measurement units which are translated from the outside world. Mostly useless on screen, they can be useful for print stylesheets. They are:

• cm a centimeter (maps to 37.8 pixels)
• mm a millimeter (0.1cm)
• q a quarter of a millimeter
• in an inch (maps to 96 pixels)
• pt a point (1 inch = 72 points)
• pc a pica (1 pica = 12 points)

Relative units

• em is the value assigned to that element’s font-size, therefore its exact value changes between elements. It does not change depending on the font used, just on the font size. In typography this measures the width of the m letter.
• rem is similar to em, but instead of varying on the current element font size, it uses the root element (html) font size. You set that font size once, and rem will be a consistent measure across all the page.
• ex is like em, but inserted of measuring the width of m, it measures the height of the x letter. It can change depending on the font used, and on the font size.
• ch is like ex but instead of measuring the height of x it measures the width of 0 (zero).

To quickly convert between px, rem and em, try my free CSS units converter.

Viewport units

• vw the viewport width unit represents a percentage of the viewport width. 50vw means 50% of the viewport width.
• vh the viewport height unit represents a percentage of the viewport height. 50vh means 50% of the viewport height.
• vmin the viewport minimum unit represents the minimum between the height or width in terms of percentage. 30vmin is the 30% of the current width or height, depending which one is smaller
• vmax the viewport maximum unit represents the maximum between the height or width in terms of percentage. 30vmax is the 30% of the current width or height, depending which one is bigger

Classic vh can mis-handle mobile browser UI chrome. The address bar shows and hides, and 100vh often does not match what you see. That is why we also have these variants, which are Baseline Widely available:

• svh: small viewport height (UI chrome expanded)
• lvh: large viewport height (UI chrome collapsed)
• dvh: dynamic viewport height (tracks as the chrome changes)

For full-height sections on phones I prefer 100dvh (or calc(100dvh - …) when you need calc()). The same sv* / lv* / dv* prefixes exist for width and the min/max forms.

There are also container query units like cqw and cqh, which size relative to a containment context instead of the viewport.

Fraction units

fr are fraction units, and they are used in CSS Grid to divide space into fractions.

Want me to talk about your product? You can sponsor this site.