CSS · Layout and visual systems
What is the difference between px, em and rem?
Short answer
px is a fixed CSS unit, em is relative to the current element's font size and compounds, and rem is relative to the root font size. rem is usually best for global type and spacing.
A CSS pixel is not a physical pixel; it is an abstract unit that browsers map to device pixels. em and rem are relative font-size units. Their reference differs, which is why they behave differently through the tree.
html {
font-size: 100%;
}
.card {
font-size: 1.25rem;
padding: 0.5em;
margin-bottom: 1rem;
}
.card .label {
font-size: 0.8em;
}How each unit resolves
- px does not scale with the user's font-size preference, though browser zoom still scales it
- em resolves against the element's own computed font-size for most properties
- Nested em values compound, so a 0.8em label inside a 1.25rem card can surprise you
- rem always resolves against the root font size
- Unitless line-height is inherited as a factor and avoids compounding
A practical default is rem for type, spacing and layout widths, and em for values that should scale with a component's local font size, such as icon padding or a button that may be rendered larger. Border widths are often fine in px.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why can em values compound unexpectedly?
- 2When is em more useful than rem?
- 3Why is unitless line-height recommended?
- 4Does px ignore browser zoom?
Say it in the interview
px is an abstract fixed unit. em is relative to the current element's font size and compounds through nested elements, which can be useful or surprising. rem is always relative to the root font size, so it is predictable for global type and spacing. I usually use rem for layout and type, em for component-local scaling, and unitless line-height to avoid inheritance problems.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.