21. CSS Units

What you will learn

Absolute and relative units
When to use px, %, em, rem, vw, and vh
How to combine units with calc()

Why units matter

Most CSS lengths need a unit, such as 20px. The one exception is 0, which needs no unit. Choosing the right unit decides whether your page adapts to different screens and user settings.

Absolute units

An absolute unit is a fixed size. The one used on screens is px (pixel). Others, such as cm, mm, in, and pt, are mainly for print.

Relative units

Unit	Relative to	Good for
`%`	The parent element’s size	Widths that follow the container
`em`	The element’s own font size (for font-size, the parent’s)	Spacing that scales with text
`rem`	The root (`html`) font size, usually 16px	Font sizes and consistent spacing
`vw`	1% of the window width	Full-width sections
`vh`	1% of the window height	Tall hero sections
`ch`	The width of the “0” character	Limiting line length for reading

px versus rem

Example

<style>
  .px  { font-size: 24px; }
  .rem { font-size: 1.5rem; }
</style>

<p class="px">24px text</p>
<p class="rem">1.5rem text (24px by default)</p>

Output

24px text

1.5rem text (24px by default)

They look the same here. The difference appears when a visitor raises the default text size in their browser: rem grows with that choice, while px ignores it.

em compounds

Because em is relative to the parent’s size, nested elements multiply. This surprises beginners.

Example

<style>
  .outer { font-size: 1.5em; }
  .inner { font-size: 1.5em; }
</style>

<div class="outer">
  Outer (1.5 x 16 = 24px)
  <div class="inner">Inner (1.5 x 24 = 36px)</div>
</div>

Output

Outer (1.5 x 16 = 24px)

Inner (1.5 x 24 = 36px)

Using rem for font sizes avoids this compounding.

Viewport units

Example

<style>
  .bar {
    width: 50vw;
    height: 40px;
    background-color: #0d6efd;
  }
</style>

<div class="bar"></div>

The bar is always half as wide as the window. In the live editor, the window is the result panel, so resize it to see the bar change.

Combining units with calc()

calc() lets you mix units in one value. Put spaces around + and -.

Example

<style>
  .main {
    width: calc(100% - 40px);
    margin: 0 auto;
    background-color: #eaf5ff;
    padding: 12px;
    box-sizing: border-box;
  }
</style>

<div class="main">Full width minus 40px</div>

Output

Full width minus 40px

Limiting line length

Lines of text longer than about 75 characters are tiring to read. ch keeps them comfortable:

Syntax

article p {
  max-width: 65ch;
}

Which unit should I use?

Font sizes: rem.
Widths of layouts: %, or max-width with rem or px.
Borders and fine details: px.
Spacing that should follow text size: rem or em.
Full-screen sections: vw and vh, with care on mobile browsers.

Common mistakes

Forgetting the unit: width: 20 is invalid (only 0 may omit it).
Putting a space between number and unit: 20 px is invalid.
Nesting em font sizes and getting huge text.
Writing calc(100%-40px) without spaces around the minus sign.

Exercise

Give .box a width of 80% but never more than 40rem, a font size of 1.25rem, 1rem of padding, and a background of #eaf5ff.

Show solution

<style>
  .box {
    width: 80%;
    max-width: 40rem;
    font-size: 1.25rem;
    padding: 1rem;
    background-color: #eaf5ff;
  }
</style>
<div class="box">Size me</div>

Knowledge check

1. Which unit is relative to the root font size?

rem

2. What does 50vw mean?

Half of the window width.

3. Which function mixes units, as in 100% - 40px?

calc()

Summary

Use rem for text, % and max-width for layouts, and px for fine details.
em compounds when nested.
calc() combines different units.