Length Units
A lot of CSS properties, such as margins, depend on length measurements to properly display various page elements. It’s no surprise, 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 accept
only positive numbers). You can also use 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 length of 0 (zero), which need not
be followed by a unit.
These length units are divided into two types: absolute length units and relative length units.
Absolute Length Units
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 (
in) As you might expect, this notation refers to the inches one finds on a ruler in the United States. (The fact that this unit is in the specification, given that almost the entire world uses the metric system, is an interesting insight into the pervasiveness of U.S. interests on the Internet—but let’s not get into virtual sociopolitical theory right now.)
- Centimeters (
cm) Refers to the centimeters that one finds on rulers the world over. There are 2.54 centimeters to an inch, and one ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access