CSS Units

Difficulty: Beginner

CSS units define the size of lengths, widths, heights, font sizes, margins, and more. Choosing the right unit is crucial for building responsive, accessible, and maintainable layouts. CSS units fall into two categories: absolute units (fixed size regardless of context) and relative units (size relative to something else like the parent element, root element, or viewport).

The pixel (px) is the most commonly used absolute unit. One CSS pixel corresponds to roughly 1/96th of an inch, though on high-DPI screens (Retina displays), a CSS pixel may map to multiple physical pixels. Pixels provide precise, predictable sizing - 16px is always 16px regardless of parent or root font size. They are ideal for borders, shadows, and fixed-width elements where exact dimensions are needed. However, pixels do not scale with user font-size preferences, making them less ideal for font sizes in accessible designs.

The em and rem units are relative to font sizes and are essential for scalable, accessible designs. 1em equals the computed font-size of the element's parent. If a parent has font-size: 16px, then 1em = 16px for its children. The problem with em is compounding - nested elements multiply their em values. 1rem (root em) solves this by always being relative to the root <html> element's font-size (typically 16px by default). Most modern CSS uses rem for font sizes and spacing because it scales consistently without compounding, and it respects user browser settings for default font size.

Percentage (%) values are relative to the parent element's corresponding property. Width: 50% means half the parent's width. Margin-left: 10% means 10% of the parent's width (not height - percentage margins and paddings always reference the parent's width). Percentages are fundamental for fluid layouts that adapt to different screen sizes. They are especially useful combined with max-width for responsive containers.

Viewport units (vw, vh, vmin, vmax) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height. They are perfect for full-screen sections (height: 100vh), responsive typography (font-size: 5vw), and viewport-relative spacing. The ch unit equals the width of the '0' character in the current font, making it ideal for setting max-width on text content for optimal readability (max-width: 65ch). The fr unit (fraction) is used exclusively in CSS Grid to distribute available space - 1fr takes one equal share of remaining space.

Code examples

Absolute vs Relative Units

/* Absolute: px (most common) */
.fixed-box {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  padding: 16px;
}

/* Relative: em (relative to parent font-size) */
.parent {
  font-size: 16px;
}
.child {
  font-size: 1.25em;    /* 16 * 1.25 = 20px */
  padding: 1em;         /* 20px (uses own computed font-size) */
  margin-bottom: 0.5em; /* 10px */
}

/* Relative: rem (relative to root <html> font-size) */
html {
  font-size: 16px; /* Browser default */
}
.heading {
  font-size: 2rem;   /* 32px, always */
  margin-bottom: 1rem; /* 16px, always */
}
.body-text {
  font-size: 1rem;   /* 16px, always */
  line-height: 1.6;  /* Unitless: 1.6 * font-size = 25.6px */
}

Pixels are absolute and predictable. em compounds with nesting - a 1.2em inside a 1.2em parent becomes 1.44x the grandparent's size. rem avoids compounding by always referencing the root font-size.

Percentages and Viewport Units

/* Percentage: relative to parent */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* Center horizontally */
}

.sidebar {
  width: 25%; /* 25% of parent width */
}

.main-content {
  width: 75%;
}

/* Viewport units */
.hero-section {
  height: 100vh;  /* Full viewport height */
  width: 100vw;   /* Full viewport width */
}

.half-screen {
  height: 50vh;   /* Half the viewport height */
}

/* Responsive font sizing with clamp */
.responsive-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Min: 24px, Scales: 4% of viewport, Max: 48px */
}

Percentages are relative to the parent element. Viewport units are relative to the browser window. clamp() combines a minimum, preferred, and maximum value for responsive sizing.

Special Units: ch and fr

/* ch unit: width of the '0' character */
.article-text {
  max-width: 65ch; /* Optimal reading width (~65 characters) */
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.7;
}

.code-block {
  max-width: 80ch; /* Wider for code */
  overflow-x: auto;
}

/* fr unit: fractions of available space (Grid only) */
.grid-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* Three columns: 25% | 50% | 25% of available space */
  gap: 20px;
}

.grid-sidebar {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Fixed sidebar + flexible main area */
  gap: 24px;
}

The ch unit is based on the width of the '0' character, ideal for setting readable line lengths. The fr unit distributes remaining space in grid layouts - 1fr 2fr gives 1/3 and 2/3 of available space.

Key points

Use rem for font sizes and spacing to ensure consistency and accessibility. Users who increase their browser's default font size will see your text scale properly with rem.
Use px for borders, shadows, and small fixed elements where exact dimensions matter.
The unitless value for line-height (e.g., line-height: 1.6) is preferred because it multiplies by the element's own font-size, avoiding inheritance issues.
Percentage-based paddings and margins always refer to the parent's width, even for vertical (top/bottom) values.

Concepts covered

px, em, rem, Percentage, vw, vh, ch, fr, Absolute Units, Relative Units