What Are CSS Units?

CSS length values always include a unit (or a special keyword like auto). The unit tells the browser what the number is relative to.

Example:

.card {
  padding: 16px;
  font-size: 1rem;
  width: 50%;
  gap: 2vw;
}

Each value above resolves to a computed pixel size in the layout engine, but the reference frame differs.

The three families developers use most

Family	Examples	Relative to
Absolute	px	Device pixels (CSS px)
Font-relative	rem, em, %	Root or parent font-size
Viewport-relative	vw, vh	Viewport width or height

Most production CSS mixes all three families. That is normal.

Why units matter in real projects

Units are not just syntax. They affect:

• Accessibility: rem-based typography respects user browser font settings better than fixed px everywhere.
• Design handoff: Designers often specify px; component libraries often store rem tokens.
• Responsive behavior: vw and clamp() scale with viewport without writing a media query for every step.
• Component nesting: em and % depend on parent context, which can surprise you inside nested components.

Units vs media queries

Media queries change rules at breakpoints. Relative units and clamp() change computed size continuously or relative to context.

Both tools solve responsive problems, but they answer different questions:

• Media query: “Apply a different rule at this breakpoint.”
• rem/em/vw/clamp: “Compute a size from context.”

Key takeaway

Before converting a design value, ask: “What is this size relative to?” px to the screen, rem to the root, em to the parent, vw to the viewport, % to the containing block.

Try the CSS Unit Converter / Clamp Generator with 16px and inspect how the same number becomes different rem, em, and vw values when context changes.