What is the difference between em, rem, px, and percentage units in CSS?
Understand the difference between em, rem, px, and percentage CSS units, when each scales, and how to pick the right one for responsive, accessible layouts.
Expected Interview Answer
px is an absolute unit fixed to one CSS pixel, while em, rem, and percentage are relative units: em is relative to the current element's font-size, rem is relative to the root (html) font-size, and percentage is relative to the parent's corresponding value.
px gives pixel-precise, non-scaling sizes. em compounds — a nested element multiplies its parent's font-size, so ems can snowball. rem always references the single root font-size, so it stays predictable regardless of nesting and scales cleanly when a user changes their browser's base font size. percentage resolves against whatever the parent provides (width against parent width, font-size against parent font-size), making it ideal for fluid layouts.
- rem gives consistent, accessible scaling from a single root value
- em is handy for sizing relative to local text (padding, icons)
- px offers exact control where scaling is undesirable (1px borders)
- percentage enables fluid, responsive box dimensions
- Relative units respect user font-size preferences, improving accessibility
AI Mentor Explanation
px is like a boundary rope pegged at an exact 70 metres no matter the ground — fixed and non-negotiable. em is like measuring a fielder's run-up in strides of the batter currently on strike, so it changes with whoever is there. rem is like measuring everything from the fixed pitch length of 22 yards — one stable reference for the whole match. Percentage is like placing a fielder at 30% of the distance from bat to boundary, scaling with each ground's size.
Step-by-Step Explanation
Step 1
Set a root font-size
The html element's font-size (default 16px) becomes the reference for every rem value on the page.
Step 2
Use rem for layout scale
Size type, spacing, and components in rem so one root change scales the whole UI predictably.
Step 3
Use em for local relationships
Apply em to padding or icons that should track the element's own font-size, remembering em compounds through nesting.
Step 4
Reserve px for fixed details
Use px where you truly want no scaling, such as hairline 1px borders or fixed shadow offsets.
Step 5
Use percentage for fluid boxes
Size widths and heights in percentage so they resolve against the parent and adapt to the viewport.
What Interviewer Expects
- Clear distinction between absolute (px) and relative (em, rem, %) units
- Understanding that em compounds while rem does not
- Knowing rem references the root html font-size
- Knowing percentage resolves against the parent's corresponding property
- Awareness of accessibility benefits of relative units
Common Mistakes
- Thinking rem is relative to the parent instead of the root
- Forgetting that nested em values multiply and compound
- Assuming percentage always refers to width for every property
- Using px everywhere and breaking user font-size scaling
- Confusing em and rem behaviour entirely
Best Answer (HR Friendly)
“px is a fixed size that never changes, while em, rem, and percentage all size things relative to something else. em is based on the element's own text size, rem on the page's root text size, and percentage on the parent element, which makes those flexible units great for responsive, accessible layouts.”
Code Example
html {
font-size: 16px; /* root reference for rem */
}
.card {
font-size: 1.25rem; /* 20px — relative to root */
padding: 0.5em; /* 10px — relative to card's own 20px */
width: 50%; /* half of the parent's width */
border: 1px solid #ccc; /* fixed, never scales */
}
.card .title {
font-size: 1.5em; /* 30px — compounds off the card's 20px */
}Follow-up Questions
- Why can nested em values lead to unexpectedly large text?
- How do rem units improve accessibility when users change their browser font size?
- When would you deliberately choose px over rem?
- What does a percentage font-size resolve against versus a percentage width?
- How do vw and vh viewport units compare to percentage?
MCQ Practice
1. What is a rem unit relative to?
rem stands for 'root em' and is always calculated from the html element's font-size, regardless of nesting.
2. Why can em units compound unexpectedly?
Because em is relative to the element's font-size, nested elements each apply the multiplier, causing sizes to snowball.
3. A width of 50% on a child resolves against what?
Percentage widths are computed relative to the containing (parent) block's width.
Flash Cards
What is px? — An absolute unit equal to one CSS pixel; it does not scale with font-size or the parent.
What is em relative to? — The current element's own font-size; it compounds through nested elements.
What is rem relative to? — The root (html) element's font-size — a single, predictable reference.
What does percentage reference? — The parent's corresponding property (e.g. width against parent width).
Which units aid accessibility? — Relative units like rem and em, because they respect user browser font-size settings.
Continue Learning
Related Interview Questions
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium
What is the difference between position relative, absolute, fixed, and sticky in CSS?
medium
What is the difference between rem-based and clamp-based fluid typography?
medium
How does the CSS overflow property control scrolling and clipping?
medium