2025-06-28 Web Development
Units of Measurement in CSS: A Practical Guide
By O. Wolfson
When styling a webpage, understanding how CSS units work is key to building responsive, accessible, and scalable interfaces. Below, we break down the most common units—px, em, rem, %, vw, and vh—with visual examples.
1. px – Pixels (Fixed Size)
- Definition: A fixed-size unit that doesn't scale with user settings or viewport changes.
- Use case: Ideal for precise control over small elements like borders or icons.
- Drawback: Doesn't adapt to user zoom or dynamic text sizes well.
Example:
html<div style={{ width: "300px", height: "50px", background: "lightblue" }}>
Fixed size box (100px x 50px)
</div>
Fixed size box (100px x 50px)
2. em – Relative to Element’s Font Size
- Definition: 1em equals the computed font size of the current element.
- Use case: Useful for padding/margin that scales with text.
- Gotcha: Can compound if nested.
Example:
html<div style="font-size: 20px;">
<div style="padding: 1em; background: lightgreen;">1em padding = 20px</div>
</div>
3. rem – Relative to Root Font Size
- Definition: 1rem equals the font size of the root (
<html>) element, usually 16px. - Use case: Great for consistent spacing across components.
- Advantage: No compounding like
em.
Example:
html<div style="font-size: 24px;">
<div style="padding: 1rem; background: peachpuff;">
1rem padding = 16px (not 24px)
</div>
</div>
em vs rem Demo (Local Calculation)
8rem × 2rem
Note: This demo simulates em/rem math locally, but does not use real CSS rem units (which always depend on the root html font-size).
4. % – Percentage (Relative to Parent)
- Definition: Size is calculated as a percentage of the parent element’s dimension.
- Use case: Responsive width/height, flexible layout components.
- Important: For height, the parent must have a defined height.
Example:
html<div style="width: 300px; height: 100px; background: lightgray;">
<div style="width: 50%; height: 100%; background: lightcoral;">
50% width, 100% height
</div>
</div>
50% width, 100% height
5. vw / vh – Viewport Width / Height
-
Definition:
1vw= 1% of viewport width1vh= 1% of viewport height
-
Use case: Fullscreen sections, dynamic typography, layout containers.
-
Caution: Can break layout on small devices if not handled carefully.
Example:
html<div style="width: 50vw; height: 30vh; background: skyblue;">
50vw x 30vh box
</div>
50vw x 30vh box
🔄 Summary Table
| Unit | Relative To | Common Use Cases | Scales With Font Size? |
|---|---|---|---|
| px | Absolute | Borders, icon size | ❌ |
| em | Parent font size | Padding, line height | ✅ |
| rem | Root font size | Consistent sizing across app | ✅ |
| % | Parent element | Widths, heights | ❌ |
| vw | Viewport width | Full-screen layouts, text | ❌ |
| vh | Viewport height | Hero sections, splash screens | ❌ |
🧪 Try It Yourself (CodePen)
You can test all these examples interactively here: 👉 CodePen Example – CSS Units Demo (or paste the HTML snippets above into your own playground)