Why CSS Units Matter

Selecting the appropriate CSS unit is essential for creating responsive and accessible web layouts. Different units behave differently depending on the context, and understanding them helps you write better CSS.

Absolute Units

Absolute units remain constant and are not affected by the viewport or surrounding elements; pixels are the most widely used example.

Pixels (px)

In CSS, pixels are the unit developers rely on most often. One pixel corresponds to one dot on the screen.

CSS

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

When to use pixels:

Borders and outlines
Small fixed spacing
Shadows
When you need precise, exact sizing

Limitations: Pixels do not scale when users change their browser font size, which can hurt accessibility.

Relative Units

Relative units scale based on another value, making them essential for responsive design.

Em (em)

The `em` unit is relative to the font size of its parent element. If the parent has a `font-size` of 16px, then `1em = 16px`.

CSS

body {
  font-size: 16px;
}

.container {
  font-size: 1.125em;   /* 18px (16 * 1.125) */
  padding: 1.5em;       /* 27px (18 * 1.5) - based on own font-size */
  margin-bottom: 1em;   /* 18px */
}

.container h2 {
  font-size: 1.5em;     /* 27px (18 * 1.5) - compounds! */
}

Warning: Em units compound when nested. If a parent is `1.5em` and a child is also `1.5em`, the child will be `1.5 * 1.5 = 2.25` times the base size. This compounding behavior can lead to unexpected results.

Rem (rem)

The `rem` unit is relative to the root element's font size (the `<html>` element), not the parent. This avoids the compounding problem of em.

CSS

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;     /* Always 32px */
}

h2 {
  font-size: 1.5rem;   /* Always 24px */
}

p {
  font-size: 1rem;     /* Always 16px */
  line-height: 1.6;
}

.card {
  padding: 1.5rem;     /* Always 24px */
  margin-bottom: 2rem; /* Always 32px */
}

.small-text {
  font-size: 0.875rem; /* Always 14px */
}

Rem is the recommended unit for most sizing because it respects the user's browser font size settings while avoiding compounding issues.

Percentage (%)

Percentages are relative to the parent element's corresponding property.

CSS

.container {
  width: 80%;           /* 80% of parent's width */
  max-width: 1200px;
  margin: 0 auto;
}

.half-width {
  width: 50%;           /* Half of parent's width */
}

.sidebar {
  width: 30%;
  float: left;
}

.main-content {
  width: 70%;
  float: left;
}

img {
  max-width: 100%;      /* Never wider than its container */
  height: auto;
}

What percentage is relative to depends on the property:

width: parent's width
height: parent's height (parent must have a defined height)
padding and margin: parent's width (even for top/bottom)
font-size: parent's font-size

Viewport Units

Viewport units are relative to the size of the browser window.

vw and vh

CSS

/* vw = 1% of viewport width */
/* vh = 1% of viewport height */

.full-screen-hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.half-screen {
  height: 50vh;
}

h1 {
  font-size: 5vw;  /* Scales with viewport width */
}

.sidebar {
  width: 25vw;
  min-width: 250px;  /* Set a minimum for small screens */
}

vmin and vmax

CSS

/* vmin = 1% of the smaller viewport dimension */
/* vmax = 1% of the larger viewport dimension */

.responsive-text {
  font-size: 3vmin;  /* Uses the smaller dimension */
}

.square {
  width: 50vmin;
  height: 50vmin;   /* Always a perfect square */
}

The calc() Function

The `calc()` function lets you perform calculations to determine CSS property values. You can mix different units.

CSS

.main-content {
  width: calc(100% - 300px);  /* Full width minus sidebar */
}

.padded-full-width {
  width: calc(100vw - 40px);  /* Full viewport minus padding */
}

.responsive-font {
  font-size: calc(1rem + 0.5vw);  /* Base size + responsive scaling */
}

.centered-box {
  width: calc(50% - 20px);
  margin: 10px;
}

.header {
  height: calc(100vh - 60px);  /* Full height minus navbar */
}

Important: Always include spaces around operators in `calc()`. Writing `calc(100%-20px)` will not work. It must be `calc(100% - 20px)`.

Which Unit Should You Use?

Here is a practical guide for choosing units:

Font sizes: Use `rem` for consistent, accessible typography
Padding and margin: Use `rem` or `em` for scalable spacing
Widths: Use `%` or `vw` for responsive layouts
Heights: Use `vh` for full-screen sections, `rem` or `px` for fixed heights
Borders: Use `px` since borders are typically thin and fixed
Media queries: Use `em` or `px` for breakpoints
Line height: Use unitless values like `1.6` which multiply by the element's font size

A Practical Example

CSS

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
}

.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 2rem;
}

Summary

Understanding CSS units is essential for responsive web design. Use rem for most sizing to ensure accessibility, percentages and viewport units for responsive layouts, and pixels only when you need precise fixed values. The `calc()` function is powerful for combining different units.

In the next section, you will learn about the CSS Box Model.