Loading lessons...
Units
CSS Units
Absolute units (fixed sizes)
px(1/96th of an inch), the most common.in,cm,mm,pt,pc.
Pixels rule the web for exact sizes.
Relative units
| Unit | Relative to | Uses |
|---|---|---|
% | the parent | width-based layouts |
em | the current element's font-size | sizes that scale with text |
rem | the ROOT (html) font-size | modern, predictable |
vw | 1% of viewport width | full-screen hero |
vh | 1% of viewport height | full-height sections |
vmin | smaller of vw/vh | |
vmax | larger of vw/vh | |
ch | width of "0" glyph | typography measures |
rem vs em
Beware the difference:
1em= parent's font-size, compounds (em in em grows!).1rem=<html>root font-size, always constant.
Best practice: rem for spacing/font, em careful for nested sizes. Fonts default to 16px.
Percentages
%of the parent for width/height/padding.- Relative size for font-size.
Fluid type
vw-based font sizes scale with screen; clamp() (next lesson) tames them.
TL;DR
- px fixed. rem & em relative to root/parent font.
vw/vhrelative to viewport.- % relative to parent.
- rem for predictable spacing.
- ch for measuring text widths.