A lot of CSS properties, such as margins, depend on length measurements in order to properly display various page elements. It probably comes as no surprise to you, then, that there are a number of ways to measure length in CSS.
All length units can be expressed as either positive or negative
numbers, followed by a label—although some properties will only
accept positive numbers. They are also real numbers; that is, numbers
with decimal fractions, such as 10.5 or 4.561. All length units are
followed by a two-letter abbreviation that represents the actual unit
of length being specified, such as
in (inches), or
pt (points). The only exception to this rule is a
0 (zero), which need not always be
followed by a unit.
These length units are divided into two types:
Absolute Length Units
No vodka jokes, please. We start with absolute units because they’re easiest to understand, despite the fact that they’re almost unusable in web design. The five types of absolute units are as follows:
- Inches (
As you might expect, the inches one finds on a ruler in America. The fact that this unit is even in the specification, given that almost the entire world uses the metric system, is an interesting insight into the pervasiveness of American interests on the Internet—but let’s not get into virtual sociopolitical theory right now.
- Centimeters (
The centimeters that one finds on rulers the world over. There are 2.54 cm to an inch, and one centimeter ...