Units of Measurement (rem, em, vh)
Master the logic of scaling. Learn when to use absolute pixels and when to leverage relative units for truly fluid design.
Expert Answer & Key Takeaways
Master the logic of scaling. Learn when to use absolute pixels and when to leverage relative units for truly fluid design.
1. Absolute vs. Relative Units
CSS units are divided into two main categories: Absolute (always the same size) and Relative (size depends on something else).
The Example: Rigid vs. Flexible
.rigid-box {
width: 300px; /* Always 300 pixels */
}
.flexible-box {
width: 20rem; /* Based on the root font-size */
}| Unit | Type | Description | Best For |
|---|---|---|---|
px | Absolute | Fixed dots on the screen. | Borders and small icons. |
rem | Relative | Based on the Root (html) font-size. | Typography & Spacing. |
em | Relative | Based on the Parent's font-size. | Components that should scale together. |
% | Relative | Based on the parent's container size. | Widths and layout columns. |
[!WARNING] A11y Warning: Never usepxfor font-size. If a user increases their browser font-size for accessibility,pxvalues will stay small whileremvalues will scale up as intended.
2. The rem vs. em Masterclass
Understanding which element a unit 'looks at' is the secret to predictable CSS.
rem(Root EM): Always looks at the<html>tag. Ifhtml { font-size: 16px; }, then1rem = 16pxeverywhere on the page.em: Looks at its direct parent. If you nest an element using2eminside another using2em, the size compounds (gets exponentially larger).
Compound Example (Why em is risky):
.parent { font-size: 20px; }
.child { font-size: 1.5em; } /* Child becomes 30px */3. Viewport Units: vh and vw
Viewport units are relative to the size of the browser window. They are essential for full-screen layouts.
| Unit | Meaning | Description |
|---|---|---|
vw | Viewport Width | 1vw = 1% of the window width. |
vh | Viewport Height | 1vh = 1% of the window height. |
dvh | Dynamic VH | Automatically adjusts when mobile address bars appear/disappear. |
The Full-Screen Hero:
.hero-section {
height: 100dvh; /* Takes full dynamic height of the screen */
width: 100%;
display: flex;
align-items: center;
}🎯 Practice Challenge: The Responsive Card
- Create a card with a
border: 2px solid black. - Task 1: Set the
border-radiususingpx. Notice it stays the same sharp corner always. - Task 2: Set the
paddingto2rem. Change your browser's default font size and see how the padding scales. - Task 3: Set the width to
50vw. Resize your browser and notice how the card always occupies exactly half the screen.
4. Senior Interview Corner
Q: Why is
rem generally preferred over px for layout spacing?A: Accessibility and Consistency. If a user changes their browser's default font size (e.g., to 20px instead of 16px), a
rem based layout will scale up proportionally, maintaining the design's balance. A px based layout will remain tiny, making it unreadable for low-vision users.Q: What problem does
dvh solve that vh could not?A: On mobile browsers (Safari/Chrome),
100vh often doesn't account for the address bar at the bottom. This causes the bottom of your 'full screen' section to be cut off. 100dvh (Dynamic Viewport Height) recalculates as the address bar slides in and out, ensuring your content is always fully visible.Top Interview Questions
?Interview Question
Q:Which relative unit is based on the font-size of the root (html) element?
A:
rem
?Interview Question
Q:To make an element exactly as wide as the browser window, which unit would you use?
A:
100vw
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.