Detailed explanation
CSS units determine how lengths such as font sizes, spacing, widths, and heights are calculated. The main distinction is between absolute units and relative units: px is an absolute CSS unit, while em, rem, %, vw, and vh depend on another measurement. Choosing the right reference makes layouts easier to maintain and adapt. Interviewers usually look for more than definitions: you should explain what each unit is relative to and give a practical use case.
A px represents one CSS pixel, not necessarily one physical screen pixel. It gives a predictable length in CSS coordinates and works well for thin borders or details that should not follow font sizing. However, pixel values still respond to browser zoom. An em depends on font size: in font-size, it is relative to the parent's computed font size; in properties such as padding, it uses the element's own computed font size. Therefore, .card { padding: 1em; } follows the card's font size, not directly its parent's. Nested font-size: 1.2em declarations can compound.
A rem is relative to the root element's font size, normally the html element. With html { font-size: 16px; }, font-size: 2rem computes to 32px. Because it does not compound through ancestors, rem is useful for consistent typography and spacing. Percentages are property-dependent rather than universally relative to the parent: width commonly uses the containing block's width, while font-size uses the parent's font size. Percentage heights often require a definite containing-block height. Percentage padding, including top and bottom padding, uses the containing block's width.
One vw equals 1% of the viewport width, and one vh equals 1% of its height. They suit viewport-sized sections and fluid sizing, but width: 100% is often safer than 100vw for ordinary blocks because viewport widths can include scrollbar space. On mobile, 100vh may extend behind browser controls; dvh tracks the dynamic viewport height. Prefer min-height over fixed height when content must grow, and combine units where useful rather than choosing one unit everywhere.
Key points to remember
- px provides fixed CSS lengths, not guaranteed physical-pixel sizes; use it for borders and precise details.
- em uses the parent's font size for font-size, but the element's own font size for padding and similar lengths.
- rem uses the root font size, making typography and spacing consistent without nested compounding.
- % has a property-specific reference; check the containing block and height constraints.
- vw and vh follow viewport dimensions; consider dvh and min-height for mobile-friendly full-screen sections.
Common mistakes candidates make
- Saying em always refers to the parent's font size, including when used for padding.
- Assuming every percentage uses the parent's corresponding dimension or that height: 100% always fills the screen.
- Treating px as a physical pixel or assuming rem alone guarantees an accessible, responsive layout.
Likely follow-up questions
How does nesting affect em compared with rem?
If a parent computes to 20px, a child with font-size: 1.5em computes to 30px; another nested 1.5em becomes 45px. With a 16px root size, 1.5rem stays 24px regardless of ancestor font sizes.
Should I set the root font size to 16px?
It is useful for demonstrating calculations, but 16px is not a guaranteed browser default. Leaving the root size unset or using 100% generally preserves the user's preferred default font size.
When should I use 100dvh instead of 100vh?
Use 100dvh when a section should follow the currently available viewport height as mobile browser controls expand or collapse. For content-heavy sections, min-height: 100dvh allows growth, and a preceding min-height: 100vh declaration can provide a fallback.
Interview tip: Explain each unit's reference measurement, give one practical use, and highlight the em padding exception with a small calculation.