When to Use px, em, rem, %, vw, or vh in CSS

Updated

Pick the unit that matches what the size should respond to: use px for fixed, non-scaling details; rem for most font sizes and spacing that should respect user settings; em for sizing that should scale with its own element's font; % for sizes relative to a parent; and vw/vh for sizes tied to the viewport. The rest of this explains the mechanism behind each and the cases where it backfires.

The core question: what should this size follow?

Every CSS length unit answers a different question about what it scales with. Before choosing, decide which of these you want:

  • Nothing — the size stays the same regardless of user settings or context → px
  • The user's root font size → rem
  • The current element's font size → em
  • The parent element's size → %
  • The browser viewport → vw / vh

The whatunit.com flowchart is built around exactly this decision: you follow branches based on whether you want fixed, scalable, or container-relative sizing, and it lands on a unit. It's an interactive diagram — you can click and drag to pan and use ctrl/cmd + mouse wheel to zoom.

px — fixed pixels

px is an absolute unit. It does not change when the user increases their browser's default font size, and it does not inherit from a parent.

Use it when:

  • You want a hairline border, a 1px divider, or a fixed shadow offset.
  • A size genuinely should not scale — for example, a decorative rule or a fixed icon dimension.

Avoid it when:

  • The value is text-related. A user who sets a larger default font size will not see your px text grow, which hurts accessibility.
  • You want consistent spacing that scales with typography.

rem — relative to the root font size

rem means "root em." It resolves against the font size of the root element (html), which by default is the user's browser font-size setting (commonly 16px, but the user can change it).

Use it when:

  • Setting font sizes — this respects the user's preference.
  • Setting spacing (margin, padding, gaps) that should scale with text.
  • You want a single knob (the root font size) to scale a whole layout.

Because every rem on the page points to the same root value, rem gives you predictable, globally consistent scaling. This is why it's the common default for typography and layout spacing.

em — relative to the current element's font size

em resolves against the font size of the element it's applied to (or the inherited font size for properties like font-size itself, where it compounds).

Use it when:

  • A component should scale as a unit with its own font size — for example, padding inside a button that should grow when the button's text grows.
  • You're building a self-contained component and want its internal proportions to hold.

The classic pitfall: em compounds. If you nest elements each with font-size: 1.2em, the sizes multiply down the tree, so a deeply nested element can end up much larger than intended. If you don't want that compounding, use rem instead.

% — relative to the parent

Percentages resolve against a property-specific reference, usually the parent element's corresponding dimension.

  • width: 50% → half the parent's width.
  • height: 50% → half the parent's height, but only if the parent has a defined height; otherwise it may collapse.
  • font-size: 120% → 120% of the inherited font size (similar compounding behavior to em).

Use it when:

  • You want fluid, container-relative sizing — a sidebar that's a fraction of its container, an image that fills its parent.
  • You're building responsive layouts where elements should track their container.

Watch out for the height case: percentage heights need a parent with a resolved height, or they won't behave as expected.

vw and vh — relative to the viewport

1vw is 1% of the viewport width; 1vh is 1% of the viewport height.

Use them when:

  • You want something to scale with the browser window — a full-screen hero section (height: 100vh), or fluid type that grows with the screen.
  • You want a layout dimension tied to the visible area rather than any parent.

Cautions:

  • 100vh on mobile can be taller than the visible area because of browser UI (address bars), so content may be cut off. Test on real devices.
  • Viewport units ignore the parent entirely, so they can break out of a constrained container in ways you didn't intend.

Quick comparison

Unit Scales with Best for Main pitfall
px Nothing Borders, fixed details, non-scaling elements Ignores user font-size settings
rem Root font size Font sizes, spacing, global scaling Depends on root value being sane
em Current element's font size Self-scaling components Compounds when nested
% Parent element Fluid, container-relative layout Height needs a defined parent height
vw / vh Viewport Full-screen sections, viewport-fluid sizing Mobile vh mismatch; ignores parents

A practical default

If you want one rule to start from: use rem for typography and spacing, px for borders and genuinely fixed details, % for container-relative layout, and reach for vw/vh only when the viewport itself is the right reference. Use em deliberately when you want a component to scale with its own text.

When two units seem to fit, ask which thing the size should follow — the user's settings, the parent, or the screen. That answer picks the unit. The whatunit.com flowchart is a useful cross-check when you're unsure; it walks the same fixed-vs-scalable-vs-container-relative decision and returns a single recommendation.