Cascading Style Sheets: The Definitive Guide

Length Units

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 length of 0 (zero), which need not always be followed by a unit.

These length units are divided into two types: absolute units and relative units.

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 (in)

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 ( cm)

The centimeters that one finds on rulers the world over. There are 2.54 cm to an inch, and one centimeter ...