Practice Questions

Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more CSS interview questions Follow 7-day crash study plan Open Essential 60

Explain the difference between em, rem, %, and px units.Frontend interview answer

HighIntermediateCss

By FrontendAtlas Team · Updated Apr 11, 2026

Interview focus

This CSS interview question tests whether you can explain em vs rem vs percent vs px: what is the difference, connect it to production trade-offs, and handle common follow-up questions.

em vs rem vs percent vs px: what is the difference explanation without falling back to memorized docs wording
Units and Responsive reasoning, edge cases, and production failure modes
How you would answer the most likely CSS interview follow-up

Practice more CSS interview questions

Interview quick answer

CSS units use different reference points. Use rem for root-scaled typography, em for component-local scaling, % for parent-relative sizing, and px for precision-only edges. The common production pitfall is assuming % behaves like rem or forgetting that nested em-based spacing compounds unexpectedly.

Full interview answer

Overview

CSS measurement units define the scale and adaptability of design elements. Absolute units like px are fixed, while relative units like em, rem, and % scale dynamically based on font size or parent dimensions.

Unit	Definition	Reference Context	Common Use
px	Pixel — absolute unit representing a device-independent pixel	Screen pixel grid	Precise layouts, borders, or icons
em	Relative to the font size of the current element	Parent element’s font size	Padding, spacing, or text sizing that scales with parent
rem	Relative to the font size of the root element (<html>)	Root element (usually 16px)	Consistent typography across app
%	Relative to the size of the parent container	Parent’s width or height	Fluid layouts, widths, or positioning

Comparison of common CSS units

CSS

html { font-size: 16px; }
.container { font-size: 1.25rem; /* 20px */ }
.card { font-size: 1em; /* 20px relative to .container */
  padding: 2em; /* 40px */
  width: 80%; /* 80% of container width */
  border: 2px solid #333; /* 2px fixed border */ }

Worked example: assign each unit one job
A settings panel can use rem for app-wide type, em for badge padding that scales with the badge text itself, % for card width that tracks the parent container, and px for a crisp border that should not scale with text.

CSS

html { font-size: 16px; }
.app-card { font-size: 1rem; max-width: 40rem; }
.app-card__title { font-size: 1.25rem; }
.app-card__badge {
  font-size: 0.875em;   /* local to the badge text */
  padding: 0.5em 1em;   /* grows with the badge font size */
  width: 75%;           /* follows the parent card width */
  border: 1px solid #222; /* fixed precision edge */
}

Nested compounding trap
If the parent card bumps its font size from 1rem to 1.25rem, any child spacing defined in em can grow twice in practice: once because the parent text got larger, and again because the child's own em-based padding is tied to that larger local font size. That surprises teams who expected only text to grow.

% vs rem follow-up
75% width answers a layout question: “how wide should this box be inside its parent?” 1.25rem answers a typography question: “how large should this value be relative to the root font size?” If the container gets narrower, the % width changes even when the root font size does not.

Rule of thumb

Use rem for app-wide typography and spacing that should scale from the root.
Use em for component-local scaling when child spacing should follow the component's own font size.
Use % for fluid container sizing that depends on the parent box.
Use px for precision-only cases like thin borders, hairlines, and tiny icons.

Think of em as ‘relative to the element,’ rem as ‘relative to the root,’ % as ‘relative to the parent,’ and px as ‘fixed and absolute.’

Practical scenario
A responsive card layout uses rem for typography, % for container width, em for an inline badge that should scale with local text, and px for hairline borders.

Common pitfalls

Using em for layout and getting compounded scaling inside nested components.
Forgetting % depends on the parent size, not the root font size.
Relying only on px and losing accessibility scaling.

Trade-off or test tip
rem is consistent but less local; em is flexible but can compound. Test both root font-size changes and narrower parent containers.