1. px (Pixels)
Type: Absolute unit
Definition: A fixed dot on the screen; consistent across all contexts
Ideal for: Precise sizing—borders, small icons, when exact pixel values are essential
2. % (Percentages)
Type: Relative to parent container
Definition: A percentage of the parent’s dimension
Ideal for: Fluid layouts—e.g. width: 50% ensures element fills half its container
3. em
Type: Relative to parent’s font size
Definition: 1em equals the font size of the element (or parent, depending on context)
Ideal for: Elements that should scale with local text size—padding, margins, child text elements
4. rem (Root em)
Type: Relative to root (HTML) font size
Definition: 1rem equals the root font-size—typically 16px by default
Ideal for: Consistent, scalable layouts—font sizes, spacing, and sizing based on a central reference
5. vw, vh (Viewport Units)
vw: 1% of viewport width
vh: 1% of viewport height
Ideal for: Full-screen elements, responsive layouts tied to screen size, or typography that adapts fluidly to viewport dimensions
🧭 Choosing the Right Unit
| Need | Best Units |
|---|---|
| Fixed control | px |
| Fluid across containers | % |
| Scale with parent font size | em |
| Global scaling consistency | rem |
| Responsive to viewport dimensions | vw, vh |
💡 Best Practices & Tips
Fonts & spacing: Use rem for consistent design across the site; use em for components that scale locally
Layouts: Use % for container widths; use vw/vh for full-screen impacts or responsive typography
Borders & iconic sizes: Stick with px for crisp and precise visuals
For fluid and accessible designs, favor relative units (%, em, rem, viewport)
Reserve px for edge cases where pixel-perfect precision is needed
In short, px ensures precision, while %, em, rem, vw, and vh offer flexibility and responsiveness. Use these units purposefully based on whether you’re aiming for fixed designs, container-relative sizing, font-affected elements, or viewport-based components.
