CSS Units

Every size in CSS needs a unit. When you write font-size: 16px or width: 50%, that number after the value is the unit. Choosing the wrong unit creates layouts that break on different screens, so understanding units is one of the most practical skills in CSS.

Two Groups of CSS Units

CSS units fall into two groups: absolute and relative.

Absolute Units

Absolute units have a fixed, real-world size. They do not change based on the screen or the parent element.

Think of absolute units like a printed ruler.
A 5cm box printed on paper is always 5cm — it never changes.

Unit	Name	When to Use
px	Pixels	Most common — screen design
cm	Centimeters	Print stylesheets only
mm	Millimeters	Print stylesheets only
in	Inches	Print stylesheets only
pt	Points (1pt = 1/72 inch)	Print stylesheets, sometimes fonts

Example:

h1 {
  font-size: 32px;
  border: 2px solid black;
}

The heading will always be 32 pixels tall, regardless of device or parent size.

Relative Units

Relative units calculate their size based on something else — a parent element, the root font size, or the screen. This makes them flexible and great for responsive design.

Think of relative units like a percentage tip at a restaurant.
If the bill is $100 and you tip 15%, the tip is $15.
If the bill is $200 and you tip 15%, the tip is $30.
The percentage stays the same, but the result changes.

The Most Important Relative Units

em — Relative to the Parent Font Size

em looks at the font size of the parent element. If the parent has a font size of 16px, then 1em = 16px and 2em = 32px.

/* Parent element has font-size: 16px */
p {
  font-size: 1.5em; /* = 24px */
  padding: 1em;     /* = 24px (uses the element's own font-size now) */
}

Watch out for nesting: If you nest elements and each uses em, the sizes stack up and grow unexpectedly. A font-size of 1.2em inside another 1.2em element gives 1.44em total.

rem — Relative to the Root Font Size

rem stands for "root em." It always looks at the <html> element's font size — never the parent. This avoids the nesting problem of em.

/* Browser default: html font-size = 16px */
h2 {
  font-size: 2rem;   /* Always 32px, no matter where h2 lives */
}

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

DIAGRAM — rem vs em nesting:

html (16px root)
└── div (font-size: 2em = 32px)
    └── p (font-size: 1.5em = 48px)  ← em STACKS up!
    └── p (font-size: 1.5rem = 24px) ← rem stays predictable

Best practice: Use rem for font sizes across your page, and em for spacing that should scale with a component's own text size.

% — Relative to the Parent Element

Percentage units calculate size based on the parent container's size.

.container {
  width: 800px;
}

.box {
  width: 50%; /* = 400px (half of parent) */
}

vw and vh — Relative to the Viewport

The viewport is the visible area of your browser window. vw is viewport width and vh is viewport height.

1vw = 1% of the browser window width
1vh = 1% of the browser window height
100vw = full width of the screen
100vh = full height of the screen

/* Hero section that fills the whole screen */
.hero {
  width: 100vw;
  height: 100vh;
}

DIAGRAM — Viewport units:

╔═══════════════════════════════════════╗
║           Browser Window              ║
║      (1200px wide, 800px tall)        ║
║                                       ║
║   1vw = 12px                          ║
║   1vh = 8px                           ║
║   50vw = 600px (half the width)       ║
║   100vh = 800px (full height)         ║
╚═══════════════════════════════════════╝

vmin and vmax

vmin — 1% of whichever is smaller: viewport width or height
vmax — 1% of whichever is larger: viewport width or height

These are useful when you want an element to scale based on the shorter dimension of a screen, such as making a square that fits on both portrait and landscape phone screens.

ch and ex — Typography Units

ch is the width of the "0" character in the current font. It works well for setting input field widths — a postal code input set to 10ch will fit exactly 10 characters.

input[type="text"] {
  width: 30ch; /* fits about 30 characters */
}

Which Unit Should You Use?

Situation	Best Unit
Font sizes across the page	rem
Spacing inside a component	em
Container or column widths	% or vw
Full-screen hero sections	100vh
Borders, thin lines	px
Input widths	ch
Print layouts	cm, mm, pt

Unitless Values

Some CSS properties accept unitless values — a plain number with no unit attached. The most common example is line-height.

p {
  font-size: 16px;
  line-height: 1.5; /* 1.5 × 16px = 24px — unitless is preferred here */
}

Using a unitless number for line-height means children inherit the ratio, not the fixed pixel value. This keeps line spacing proportional when font sizes change.

Common Mistakes with CSS Units

Forgetting to add a unit: width: 200 does nothing. You need width: 200px.
Exception: Zero never needs a unit. margin: 0 is valid.
Using px for everything: Layouts built entirely in pixels break on large monitors and small phones.
Mixing em too deeply: Nested em values compound and create unexpected sizes.

Quick Reference

/* Absolute */
border: 1px solid gray;

/* Relative to root */
font-size: 1rem;

/* Relative to parent */
width: 80%;

/* Relative to viewport */
height: 100vh;

/* Relative to font character */
input { width: 20ch; }

Understanding units lets you build layouts that adapt to any screen. Start with rem for fonts, % for widths, and px for thin, precise details like borders.

Previous lesson

Back to course

Next lesson