| Unit | Equivalent (base 16px) | Type | Description | Best Used For |
|---|---|---|---|---|
| px | 1px = 1px | Absolute | Pixels — screen dots | Borders, shadows, precise sizing |
| rem | 1rem = 16px | Relative | Root element font size | Font sizes, spacing (scalable) |
| em | 1em = 16px* | Relative | Parent element font size | Padding/margin relative to font |
| % | 100% = parent size | Relative | Percentage of parent | Widths, heights, fluid layouts |
| vw | 1vw = 14.4px* | Viewport | 1% of viewport width | Full-width sections, fluid type |
| vh | 1vh = 9px* | Viewport | 1% of viewport height | Full-height sections, hero areas |
| vmin | 1vmin = min(vw,vh) | Viewport | 1% of smaller viewport dimension | Square elements, responsive icons |
| vmax | 1vmax = max(vw,vh) | Viewport | 1% of larger viewport dimension | Background sizing |
| pt | 1pt = 1.333px | Absolute | Points (print) | Print stylesheets |
| pc | 1pc = 16px | Absolute | Picas (print) | Print stylesheets |
| cm | 1cm = 37.795px | Absolute | Centimeters | Print layouts |
| mm | 1mm = 3.779px | Absolute | Millimeters | Print layouts |
| in | 1in = 96px | Absolute | Inches | Print layouts |
| ch | ≈ width of "0" | Relative | Width of the "0" character | Input widths, monospace layouts |
| ex | ≈ 0.5em | Relative | x-height of current font | Vertical alignment |
* Values marked with asterisk depend on viewport/parent settings above.
Explore 500+ free tutorials across 20+ languages and frameworks.