CSS • July 2, 2024 • Aditya Rawas

Understanding CSS Units: The Complete Guide (px, em, rem, vw)

CSS units control the size, dimensions, and spacing of every element on your page. Choosing the wrong unit can make a layout brittle and hard to maintain; choosing the right one makes it flexible and responsive by default.

CSS units fall into two broad categories: absolute and relative. Let’s cover all of them with examples.

Absolute Units

Absolute units are fixed — they don’t change based on other elements. Use them when you need precise, non-responsive dimensions (e.g., print stylesheets, border widths).

Pixel (px)

The most common unit in web design. 1px = 1/96th of an inch on screen.

.box {
    width: 100px;
}

Point (pt)

Used in typography. 1pt = 1/72 of an inch (≈1.333px).

.box {
    font-size: 12pt;
}

Pica (pc)

Also a typography unit. 1pc = 1/6 of an inch (≈16px).

.box {
    width: 3pc;
}

Centimeter (cm) and Millimeter (mm)

Metric units. Useful for print. 1cm ≈ 37.8px at 96dpi.

.box {
    width: 10cm;
    margin: 5mm;
}

Inch (in)

1in = 96px at 96dpi, or 2.54cm.

.box {
    width: 1in;
}

Quarter-Millimeter (Q)

1Q = 0.25mm. Rarely used outside print contexts.

.box {
    width: 40Q;
}

Relative Units

Relative units scale based on other elements. They’re the backbone of responsive design.

Em (em)

Relative to the font-size of the current element. 1em = the element’s current font-size.

.container {
    font-size: 16px;
}

.text {
    font-size: 2em; /* 32px */
}

Watch out: em compounds when nested — a child with font-size: 1.5em inside a parent with font-size: 1.5em results in 2.25em from the root.

Root Em (rem)

Relative to the root element’s font-size (<html>). Avoids the compounding problem of em.

html {
    font-size: 16px;
}

.text {
    font-size: 1.5rem; /* always 24px */
}

Use rem for font sizes and spacing to maintain consistent, scalable layouts.

Percent (%)

Relative to the parent element’s size. Common for widths, heights, and padding.

.container {
    width: 50%;
}

.box {
    width: 100%; /* 100% of .container */
}

Viewport Width (vw) and Height (vh)

1vw = 1% of the viewport’s width. 1vh = 1% of its height.

.hero {
    width: 100vw;
    height: 100vh;
}

Viewport Minimum (vmin) and Maximum (vmax)

vmin = 1% of the smaller viewport dimension. vmax = 1% of the larger.

.container {
    font-size: 5vmin;
}

Character (ch)

Relative to the width of the 0 (zero) character in the current font. Useful for controlling text column widths.

.prose {
    max-width: 65ch; /* readable line length */
}

Ex (ex) and Cap (cap)

ex = height of the lowercase x character.
cap = height of uppercase letters.

Ic

Relative to the size of the CJK “水” character. Used for East Asian typography.

Line Height Units (lh, rlh)

lh = the element’s computed line-height.
rlh = the root element’s line-height.

Newer Viewport Units

Modern CSS introduces viewport-relative units that handle dynamic browser chrome (like mobile address bars).

Large Viewport Units (lvw, lvh, lvmin, lvmax)

Based on the largest possible viewport (address bar hidden).

.hero {
    height: 100lvh;
}

Small Viewport Units (svw, svh, svmin, svmax)

Based on the smallest possible viewport (address bar visible).

.hero {
    height: 100svh;
}

Dynamic Viewport Units (dvw, dvh, dvmin, dvmax)

Update dynamically as the viewport changes. Great for reliable full-height mobile layouts.

.modal {
    height: 100dvh;
}

Quick Reference

Unit	Relative To	Best Used For
`px`	Screen pixel	Borders, shadows, precise layouts
`rem`	Root font-size	Font sizes, spacing, consistent scale
`em`	Current font-size	Component-local spacing
`%`	Parent element	Widths, flexible containers
`vw` / `vh`	Viewport dimensions	Hero sections, full-screen layouts
`ch`	Zero character width	Readable text column widths
`dvh`	Dynamic viewport height	Full-height mobile layouts

Key Takeaways

Use px for fixed-size elements like borders and shadows.
Use rem for font sizes and spacing to maintain a consistent, scalable design system.
Avoid em for font sizes unless you specifically want compounding behavior.
Use vw/vh for viewport-filling sections.
Use dvh instead of vh for reliable full-height layouts on mobile where browser chrome is dynamic.