XML in a Nutshell, 3rd Edition

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	margin-bottom
font-size	left
line-height	top
margin-left	height
margin-top	width
margin-right

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 they 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 0.5 centimeters 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 1.5 times ...