Pixels, Points, Picas, and Other Units of Length (XML in a Nutshell, 2nd Edition)

12.6. Pixels, Points, Picas, and Other Units of Length

Many CSS properties represent lengths. Some of the most important (though far from all) of these include:

border-width
font-size
line-height
margin-left, margin-top, margin-right, and margin-bottom
left
top
height
width

CSS provides many different units to specify length. They fall into two groups:

Absolute units of length such as inches, centimeters, millimeters, points, and picas.
Relative units such as ems, exes, pixels, and percentages.

Absolute units of length are appropriate for printed media (that is, paper), but should be avoided in other media. Relative units should be used for all other media, except for pixels, which probably shouldn't be used at all. For example, this style rule sets the dish element to be exactly one-half centimeter high:

dish { height: 0.5cm }

However, documents intended for display on screen media like television sets and computer monitors should not be set to fixed sizes. For one thing, the size of an inch or other absolute unit can vary depending on the resolution of the monitor. For another, not all users like the same defaults, and what looks good on one monitor may be illegible on another. Instead, you should use units that are relative to something, such as an em, which is relative to the width of the uppercase letter M, in the current font, or ex, which is relative to the height of the lowercase letter x in the current font. For example, this rule sets the line-height property of the story element to one and half times the height of the letter x:

story { line-height: 1.5ex}

Pixel is also a relative unit, though what it's relative to is the size of a pixel on the current display. This is generally somewhere in the vicinity of a point, but it can vary from system to system. In general, we don't recommend using pixels unless you need to line something up with a bitmapped graphic displayed at exactly a 1:1 ratio. Web pages formatted with pixel lengths invariably look too small or too large on a large fraction of users' monitors.

One very useful technique is to specify lengths as percentages of some other length. Exactly what this is a percentage of varies from property to property. For instance, if the line-height is given as a percentage, then it's calculated with respect to the font-height of the same element. These two rules set the font-height of the dish element to 0.5 centimeters and the line-height of the dish element to 0.75 centimeters:

dish  { font-height: 0.5cm }
dish  { line-height: 150% }