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.
1emis 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).
chis the equivalent of
em, but applied to the width of the
0(zero) numeral of the chosen font.
frrelates to the CSS grid: it represents the fraction of space that a grid module takes up, relative to other modules. As such, it is a special unit of measurement, and can't be used outside the CSS grid context.
A few tips and pointers:
- 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:
Working out which CSS measurement system to use where on a web page can be confusing, even intimidating; I've created a simple guide to help the perplexed.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.