While CSS has many ways to measure linear distance, all of them can be broadly classified into two groups:
- absolute values that relate to a real-world system, such as picas or pixels.
- relative units that relate to the element itself, or its context.
As a general rule, relative units are preferred for responsive design; absolute units are for small fixed-width elements such as hairlines.
| Absolute CSS Unit | Abbreviation | Relative CSS Unit | Abbreviation |
|---|---|---|---|
| Pixels | px | Percent | % |
| Points | pt | Em | em |
| Inches | in | Ex | ex |
| Centimeters | cm | Root em | rem |
| Picas | pc | Viewport width | vw |
| Quarter-millimeter | q | Viewport height | vh |
| Viewport minimum | vmin | ||
| Viewport maximum | vmax | ||
| character | ch | ||
| Grid | gd |
For more information, I've linked lesser-known units to associated in-depth articles that explain them thoroughly.
1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font).
ch is the equivalent of em, but applied to the width of the 0 (zero) numeral of the chosen font.
gd relates to the CSS grid; unfortunately, only IE10+ currently supports the grid module.
You never need to specify units when declaring a length value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared: 2em, 2px, etc.
All systems of CSS measurement can take floating point values: 2.25rem, 5.3cm, etc.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
