CSS Units px, em, rem, vw, vh

Absolute Units

CSS units decide how big something is and what that size depends on. A pixel value stays fixed, a percentage depends on the parent, rem depends on the root font size, and viewport units depend on the screen.

Choosing the right unit is a design decision, not just syntax. Use fixed units when a value must be exact, relative units when a layout should adapt, and character-based units when readability matters.

Absolute units represent a fixed measurement. They do not scale naturally based on the screen or parent element, so they are best used when exact sizing is truly needed.

px - pixels, the most common absolute-like unit in screen design
pt - points, often used in print contexts
cm, mm, in - physical units, rarely useful for screen layouts

Relative Units

Relative units scale in relation to another value, such as the root font size, parent font size, viewport size, or container size. These units are much more useful for responsive design.

Unit	Relative To	Common Use
em	Current element font size	Component spacing tied to local text
rem	Root font size	Consistent spacing and typography
%	Parent size	Fluid widths and layout sizing
vw	Viewport width	Full-width sections, fluid typography
vh	Viewport height	Hero sections, full-screen panels
ch	Width of the "0" character	Readable text line lengths

Common Unit Patterns

Most production styles mix units. A layout might use rem for spacing, percent for fluid width, ch for readable article length, and px for a one-pixel border. The goal is not to avoid px completely, but to use each unit for the job it does best.

Practical unit choices

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
}

.container {
    width: 90%;
    max-width: 72rem;
}

.hero {
    min-height: 100vh;
}

.article {
    max-width: 65ch;
}

Choosing the Right Unit

Be careful with viewport height on mobile browsers because browser toolbars can change the visible viewport. Newer units like svh, lvh, and dvh can help when supported, but min-height and flexible layouts are often more reliable than forcing exact full-screen panels.

Use rem for fonts and spacing that should stay consistent across the page.
Use em when a component should scale based on its own text size.
Use percentages for flexible widths inside a parent container.
Use viewport units carefully for full-screen sections and fluid layouts.
Use px when a precise fixed size is genuinely needed.

Readable article and responsive spacing

.article {
    width: min(100% - 2rem, 68ch);
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem);
}

.article p {
    font-size: 1rem;
    line-height: 1.7;
}

.hero {
    min-height: 100svh;
    padding: 2rem;
}