What are CSS Units?
CSS units define the size of elements, text, spacing, and layout. They are categorized into absolute and relative units.
Absolute Units
Absolute units have fixed values and do not change based on screen size.
CSSRead-only
1
Common Absolute Units
| Unit | Description |
|---|---|
| px | Pixels (most common) |
| cm | Centimeters |
| mm | Millimeters |
| in | Inches |
| pt | Points |
Relative Units
Relative units adjust based on parent elements or screen size, making them ideal for responsive design.
CSSRead-only
1
Common Relative Units
| Unit | Description |
|---|---|
| % | Relative to parent element |
| em | Relative to parent font size |
| rem | Relative to root font size |
| vw | Viewport width (1vw = 1% of screen width) |
| vh | Viewport height (1vh = 1% of screen height) |
Example Comparison
CSSRead-only
1
em vs rem
| Unit | Based On |
|---|---|
| em | Parent element |
| rem | Root (html) element |
Best Practices
- Use rem for consistent typography
- Use % for flexible layouts
- Use vw/vh for responsive designs
- Avoid overusing px for scalability
Common Mistakes
- Using only px for all layouts
- Confusing em with rem
- Ignoring responsive units
- Mixing units inconsistently
Conclusion
CSS units play a crucial role in responsive design. Choosing the right unit ensures flexibility and better user experience across devices.