CSS Units

Imagine building a birdhouse. If you use a rigid wooden ruler, you measure everything in exact inches (pixels). It works, but it is completely unyielding. If you decide to make the entire birdhouse twice as large later, you have to recalculate every measurement manually. Now, imagine using elastic rulers. You define your measurements relative to the size of the entrance hole (relative units). If you make the entrance hole twice as large, the entire birdhouse expands proportionally automatically. CSS units are those rulers. Choosing between pixels, rem, em, or viewport units determines how your elements scale and adapt across different screen sizes.

In this page:

Rigid Pixel Units (px)
Flexible Root em Units (rem)
Contextual em Units (em)
Viewport Width and Height (vw/vh)
Percentage Units (%)

Rigid Pixel Units (px)

Pixels (px) are absolute units. A pixel represents a single physical dot of color on a standard computer screen. Because pixels are absolute, they are completely rigid and do not scale relative to other elements or browser settings.

Note: Use pixel units for properties that require exact, unyielding precision, such as border widths.

Warning: Using pixel units for font sizes can prevent users from scaling text in their browser settings, violating web accessibility guidelines.

Example: Rigid Pixel Units (px)

css

<style>
.box {
  border: 2px solid black;
}
</style>
<div class="box">2px border stays exactly 2px always</div>

Flexible Root em Units (rem)

The rem (Root Em) unit is a relative unit. It calculates values relative to the base font size of the root html element (which is 16px by default in most browsers). This makes rem units highly accessible and responsive.

Note: Use rem units for all typography, padding, and margins to ensure they scale proportionally with browser text settings.

Warning: Always write decimal values (like 1.5rem) to set proportional sizes cleanly.

Example: Flexible Root em Units (rem)

css

<style>
html { font-size: 16px; }
p { font-size: 1.5rem; }
</style>
<p>1.5rem = 1.5 times the root font size</p>

Contextual em Units (em)

The em unit is a relative unit that calculates values relative to the font size of the element's parent container. This makes em units highly useful for scaling spacing (like padding) proportionally with the text size of that specific component.

Note: Use em units for padding and margins inside buttons to keep spacing proportional to the text size.

Warning: Nesting multiple em-sized elements can cause font sizes to multiply exponentially and shrink or grow out of control.

Example: Contextual em Units (em)

css

<style>
.parent { font-size: 20px; }
.child { padding: 1em; }
</style>
<div class="parent">
  <span class="child">1em padding = 20px, matching the parent's font-size</span>
</div>

Viewport Width and Height (vw/vh)

Viewport units are relative to the browser window size: 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. This makes them perfect for building full-screen layouts.

Note: Use height: 100vh to quickly create full-screen landing pages or hero section grids.

Warning: Text sized in viewport width units (vw) can become unreadably tiny on mobile screens; use clamp() to enforce limits.

Example: Viewport Width and Height (vw/vh)

css

<style>
.hero {
  height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="hero">Always fills the full viewport height</div>

Percentage Units (%)

The percentage (%) unit is a relative unit that calculates values relative to the size of the parent container element, making it perfect for building fluid multi-column grids.

Note: Set box-sizing: border-box globally to prevent padding from breaking percentage column grids.

Warning: Failing to set clear parent widths can cause percentage-based child elements to collapse to 0.

Example: Percentage Units (%)

css

<style>
.parent {
  width: 500px;
  background: #ddd;
  padding: 8px;
}
.child {
  width: 50%;
  background: coral;
  color: white;
  padding: 8px;
}
</style>
<div class="parent">
  <div class="child">50% of its 500px parent</div>
</div>

Common Mistakes

Using absolute pixel units for font sizes, which prevents users from scaling text in browser settings and violates web accessibility guidelines.
Nesting multiple em-sized elements recursively, causing font sizes to multiply exponentially and grow out of control.
Overusing viewport height units (vh) on mobile screens, which can cause content to overlap with native system status bars.

Chapter Summary

Use rigid pixels (px) only for properties requiring absolute, unyielding precision (like border widths).
Use rem units for accessible typography, and em units to scale component padding proportionally with text size.
Build fluid columns using percentage units (%), and full-screen layouts using viewport width (vw) and height (vh) units.

Browser Support

Standard CSS units (px, rem, em, %, vw, vh) are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson CSS Gap Next Lesson → CSS Absolute Units