CSS Units Cheat Sheet for Developers
Absolute vs. Relative Units
CSS offers a wide range of units, which fall into two categories:
- Absolute Units: px, in, cm, mm, pt, pc
- Relative Units: rem, em, %, vw, vh, vmin, vmax
Quick Comparison
| Unit | Description | Use Case |
|---|---|---|
| px | Pixels (absolute) | Fixed layout elements |
| rem | Root element multiplier | Consistent scaling |
| em | Parent font size multiplier | Nested scaling |
| % | Percentage of parent | Flexible layouts |
| vh/vw | Viewport height/width | Full-screen layouts |
When to Use What?
- rem: for most font sizes — predictable and scalable
- em: for spacing/padding inside components
- px: for border widths, 1px lines
- %: for fluid containers (widths, heights)
- vh/vw: for hero sections, full-page modals
Common px to rem conversions
Here's a quick reference table based on a 16px root font size:
| px | rem |
|---|---|
| 10px | 0.625rem |
| 20px | 1.25rem |
| 30px | 1.875rem |
| 40px | 2.5rem |
| 50px | 3.125rem |
| 60px | 3.75rem |
| 70px | 4.375rem |
| 80px | 5rem |
| 90px | 5.625rem |
| 100px | 6.25rem |
| 110px | 6.875rem |
| 120px | 7.5rem |
| 130px | 8.125rem |
| 140px | 8.75rem |
| 150px | 9.375rem |
| 160px | 10rem |
| 170px | 10.625rem |
| 180px | 11.25rem |
| 190px | 11.875rem |
| 200px | 12.5rem |
| 210px | 13.125rem |
| 220px | 13.75rem |
| 230px | 14.375rem |
| 240px | 15rem |
| 250px | 15.625rem |
| 260px | 16.25rem |
| 270px | 16.875rem |
| 280px | 17.5rem |
| 290px | 18.125rem |
| 300px | 18.75rem |
Summary
Using the right unit can dramatically improve the scalability and responsiveness of your UI. Stick to relative units for flexibility and reserve absolute units when precision is key.