← Back to CSS Course | Chapter 7: Layout Utilities | Lesson 3 of 5

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:

  1. Rigid Pixel Units (px)
  2. Flexible Root em Units (rem)
  3. Contextual em Units (em)
  4. Viewport Width and Height (vw/vh)
  5. Percentage Units (%)
Syntax
css 
selector {
  width: number + unit;  /* px, em, rem, %, vw, vh */
}

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.
  • Accepted values:
  • 1px — one CSS pixel (about 1/96 inch)
  • <number>px — any integer or decimal length
  • 0 — unitless zero is allowed for lengths
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.
  • Accepted values:
  • 1rem — equals the root html font-size (16px by default)
  • 1.5rem — 1.5 times the root font-size
  • 0.5rem — half the root font-size
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.
  • Accepted values:
  • 1em — equals the element's own font-size (or parent's, for font-size itself)
  • 1.5em — 1.5 times that font-size
  • 0.5em — half of that font-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.
  • Accepted values:
  • 1vw — 1% of the viewport width
  • 1vh — 1% of the viewport height
  • 100vw / 100vh — full viewport width or height
  • 1dvh — 1% of the dynamic viewport height (mobile-friendly)
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.
  • Accepted values:
  • 50% — half of the reference size (usually the parent)
  • 100% — full parent size
  • <number>% — any percentage the property allows
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>
Live Example
Related Topics

CSS Gap · CSS Website Layout · CSS Outline · CSS Gradients

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using absolute pixel units for font sizes, which prevents users from scaling text in browser settings and violates web accessibility guidelines.
  2. Nesting multiple em-sized elements recursively, causing font sizes to multiply exponentially and grow out of control.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.