Detailed explanation
Both em and rem are relative CSS length units, but they use different reference font sizes. For the font-size property, em is relative to the parent's computed font-size, while rem is relative to the root element's computed font-size, normally the html element. This distinction matters when nesting reusable components: em-based font sizes can multiply through the hierarchy, whereas rem-based values remain independent of intermediate ancestors. Interviewers usually expect you to explain the reference point, calculate a nested example, and describe when each unit is useful.
Suppose html has font-size: 16px, and a .parent element inherits that size before applying font-size: 1.5em. Its computed font size becomes 24px. A .child inside it with font-size: 1.5em becomes 36px because its reference is now 24px. Another level with the same declaration would become 54px. In contrast, font-size: 1.5rem computes to 24px at every level while the root remains 16px. However, nesting alone does not cause compounding: a child without its own font-size declaration normally inherits the parent's computed size rather than multiplying it again.
An important nuance is that em does not always refer directly to the parent's font size. On properties such as padding, margin, and width, it uses the element's own computed font-size. For example, a button with font-size: 1.5rem and padding: 0.5em 1em has a 24px font size and padding of 12px vertically and 24px horizontally. The browser resolves these relative lengths using the relevant computed font size. This makes em useful for spacing that should scale with a component's text.
Use rem when typography and spacing should follow a consistent root-based scale across nested cards, dialogs, or navigation elements. Use em when a component should intentionally adapt to its local text size, such as button padding or an icon's dimensions. Neither unit is inherently better, and rem is not a fixed pixel unit: changing the root font size changes rem-based lengths throughout the page. A strong answer distinguishes intentional local scaling from accidental repeated font-size multiplication and mentions testing nested states and enlarged text.
Key points to remember
- For font-size, em uses the parent's computed font-size; rem uses the root element's computed font-size.
- Repeated font-size: 1.5em declarations scale 16px to 24px, then 36px, then 54px.
- Inheritance alone does not compound em values; repeated relative font-size declarations do.
- For padding, margin, and width, em uses the element's own computed font-size.
- Choose rem for root-based consistency and em for intentional text-relative component sizing.
Common mistakes candidates make
- Saying em always refers to the parent's font size, including when used for padding or width.
- Assuming every nested element compounds its font size even without a new font-size declaration.
- Treating rem as permanently equal to 16px instead of checking the root font size.
Likely follow-up questions
What happens if a child has no font-size declaration?
It normally inherits its parent's computed font-size. If the parent computes to 24px, the child also uses 24px; it does not inherit and reapply the parent's 1.5em multiplier.
Can em and rem be used together in one component?
Yes: use font-size: 1rem for root-based typography and padding: 0.5em 1em for spacing that follows the component's text. If a variant increases the font size, its em-based padding scales automatically.
Does using rem automatically make a page accessible?
No: accessibility also depends on readable text, sufficient contrast, and layouts that tolerate zoom and text enlargement. Keeping the root size responsive to the user's default font preference, rather than forcing a pixel size, helps rem-based sizing respect that preference.
Interview tip: Calculate the 16px → 24px → 36px example first, then clarify the em padding exception and explain your choice for reusable components.