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|
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:
All systems of CSS measurement can take floating point values:
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.