CSS Units & Values

Every CSS value needs a unit — and choosing the right one decides whether your layout adapts or breaks. This chapter compares absolute and relative units, shows when each shines, and introduces calc() and clamp() for fluid designs.

Absolute units

px is exact and predictable: borders, shadows, and fine details want it. But sizes of type in px ignore a user's browser font preference — use relative units there.

Relative units

em vs rem: the classic confusion

html { font-size: 16px; }

.card       { font-size: 1.25rem; }   /* 20px — of the ROOT, stable */
.card .note { font-size: 0.8em; }     /* 16px — 80% of .card's 20px */

.gutter     { padding: 1em; }         /* follows the ELEMENT's font size */
.gutter-big { font-size: 2rem; padding: 1em; }  /* padding doubles too! */

Expected output: the same 1em padding renders at different pixel sizes wherever the element's font size differs — that is em. rem stays constant (of the root), which is why it is the default choice for component sizing.

The nested-scaling power of em

Because em compounds, a container can scale everything inside it — handy for accessibility toggles or zoom UIs:

.zoom-ui      { font-size: 1rem; }
.zoom-ui.lg   { font-size: 1.25rem; }   /* every em-based child grows 25% */

Percentages: know your reference

.child       { width: 50%; }           /* of parent's WIDTH (even for height %) */
.padded      { width: 300px; padding: 10%; }  /* padding % is of parent's WIDTH */
.inline-pad  { padding: 1em 5%; }      /* horizontal vs vertical reference differs */

Height percentages only work when the parent has a definite height — a frequent surprise. For equal-height children prefer flex/grid stretch (the default).

Viewport units

.hero    { min-height: 100svh; }   /* small viewport height — mobile URL bar safe */
.sidebar { width: 18rem; }
.banner  { font-size: 3vw; }        /* scales with width — use clamp instead (below) */

Prefer the svh/lvh/dvh family over plain vh on mobile: the classic 100vh hero hides behind expanding browser bars; 100svh is stable.

calc(): arithmetic with mixed units

.content {
  width: calc(100% - 3rem);
  padding-left: calc(2rem + 4vw);
}

You can freely mix %, rem, and vw — something plain CSS values cannot do. Spaces around + and - are mandatory.

clamp(): min, ideal, max

h1 {
  font-size: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}
.container {
  width: clamp(320px, 90%, 1200px);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

Expected output: headings start at 32 px on phones, grow smoothly with the viewport, and stop at 56 px on large screens — a complete fluid-type rule in one line, no media queries. (Middle value must combine a viewport unit with a static one to be truly fluid.)

Unitless values

• line-height: 1.6 — a multiplier of the element's font size (preferred).
• z-index: 10, font-weight: 700, flex-grow: 1 — plain numbers by definition.

Which unit? Quick decisions

Common mistakes

• em padding on rem-sized parents — recompute carefully or use rem for stable spacing.
• vw font sizes without clamp — huge on desktop, tiny on tablets.
• px font sizes everywhere — breaks users who enlarged their default font.
• Forgetting spaces in calc() — calc(100%-3rem) is invalid and silently ignored.

Practice checklist

1. Convert one page's font sizes from px to rem and check it with a 20 px browser default.
2. Write a fluid h1 with clamp() and resize the window.
3. Rebuild a sidebar layout using calc(100% - 18rem) for the content column.

Units matter most when screens change size — next: Responsive Design & Media Queries.