CSS Units

Master absolute units (px) and relative units (em, rem, %, vw, vh) and know when to use each.

Overview

CSS supports a wide range of units for expressing lengths, sizes, and positions. Choosing the right unit matters for accessibility, responsiveness, and maintainability. **Absolute units:** - `px` pixels (screen-independent logical pixels) **Font-relative units:** - `em` relative to the element's own font-size (or parent's for font-size itself) - `rem` relative to the root (`<html>`) font-size (typically 16px by default) **Container-relative units:** - `%` relative to the parent element's value for the same property **Viewport units:** - `vw` 1% of the viewport width - `vh` 1% of the viewport height - `vmin` 1% of the smaller viewport dimension - `vmax` 1% of the larger viewport dimension **When to use which:** - Typography: use `rem` for font-size, `em` for spacing around text - Layouts: `%`, `fr`, `vw` for fluid sizing - Borders, shadows: `px` is fine - Viewport-filling sections: `100vh`

Key Points

•px: absolute, predictable, good for borders/shadows/icons
•rem: relative to root font-size best for font-size and spacing for accessibility
•em: relative to element's own font-size useful for padding/margin that should scale with text
•%: relative to parent great for widths in responsive layouts
•vw/vh: viewport width/height great for full-screen sections
•1rem = browser default font-size (typically 16px)

Examples

rem for typography and spacing

/* Browser default: 1rem = 16px */
body    { font-size: 1rem; }      /* 16px */
h1      { font-size: 2.5rem; }    /* 40px */
h2      { font-size: 1.75rem; }   /* 28px */
small   { font-size: 0.875rem; }  /* 14px */

/* Spacing in rem scales with font preferences */
p       { margin-bottom: 1rem; }
section { padding: 3rem 0; }

When the user increases their browser font size, all rem-based sizes scale up proportionally.

em for component-level spacing

.button {
  font-size: 1rem;
  /* Padding in em = relative to THIS element's font-size */
  padding: 0.75em 1.5em;  /* 12px 24px when font-size is 16px */
}

/* Change font-size and padding scales automatically */
.button-large {
  font-size: 1.25rem;
  padding: 0.75em 1.5em;  /* now 15px 30px */
}

Viewport units

.hero {
  height: 100vh;     /* full viewport height */
  width: 100vw;      /* full viewport width */
}

/* Clamp font size between 1rem and 3rem based on viewport */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Common Mistakes

Using px for font-size prevents text from scaling with user browser preferences
Confusing em (own font-size) with rem (root font-size) em compounds when nested
Using vw for font-size without clamp very large on wide screens, very small on narrow

Note

A simple guideline: use rem for font-sizes and global spacing, em for component-internal spacing, px for fine details (borders, 1px lines), and vh/vw for viewport-filling elements.

CSS Units

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is 2.5rem if the browser default font-size is 16px?