Units
The Mozilla developers page is quite complete, but sometimes I can't quickly find what I'm looking for in it. This list is not exhaustive and contains only units I have used or plan to use.
Absolute
| Unit | Name |
|---|---|
| px | Pixels |
| cm | Centimeters |
| mm | Millimeters |
| pc | Picas |
Relative
| Unit | Name | Relative to |
|---|---|---|
| em | Em units | Font size of parent element |
| rem | Root em | Font size of root element |
| ch | Character width | Width of '0' in current font |
| cap | Cap height | Height of a capital letters in current font |
| lh | Line height | Line height of element |
| % | Percentage | Parent element corresponding property |
| fr | Fraction unit | Fraction of available space |
Viewport Units
| Unit | Name | Represent |
|---|---|---|
| vw | Viewport width | 1% of viewport width |
| vh | Viewport height | 1% of viewport height |
| dvw | Dynamic viewport width | 1% of dynamic viewport width |
| dvh | Dynamic viewport height | 1% of dynamic viewport height |
| lvw | Large viewport width | 1% of large viewport width |
| lvh | Large viewport height | 1% of large viewport height |
| svw | Small viewport width | 1% of small viewport width |
| svh | Small viewport height | 1% of small viewport height |
Container Query Units
| Unit | Name | Represent |
|---|---|---|
| cqw | Container query width | 1% of container width |
| cqh | Container query height | 1% of container height |
Angle
| Unit | Name | Represent |
|---|---|---|
| deg | Degrees | 1 degree of a circle (360deg) |
| grad | Gradians | 1 gradian of a circle (400grad) |
| rad | Radians | 1 radian of a circle (2π rad) |
| turn | Turns | 1 turn of a circle (1turn) |
Time
| Unit | Name |
|---|---|
| s | Seconds |
| ms | Milliseconds |