Length Units: Everything Is Relative

Many CSS properties are specified with length measurements, either horizontal or vertical. Length values can be either positive or negative, although some properties other than length are restricted to be positive. The format of a length value is an optional sign ( + or ), followed by a number, followed by a two-letter unit abbreviationlike px (pixels), pt (points), or in (inches). For length values of , however, units are optional. Length units can be either relative or absolute.

Relative Length Units

Relative units measure distance relative to another length property. The relative units are em , ex , px , and % (percentage). Here they are in all their glory :

 body { margin: 0.5em }  h1   { margin: 1ex } p    { font-size: 12px } dt   { font-size: 120% } 

In CSS, em is short for "em-height," and ex is short for "x-height." Both terms will be familiar to those from the typesetting world. One em is traditionally equal to the width of the capital M in the current font. In reality, it is equal to the computed font-size of a given element. The exception is when em is used on the font-size property itself, referring to the font size of the parent element. For example:

 dt { font-size: 1.2em } 

Here descriptive terms would be 1.2 times the font size of the parent element, or about 20 percent larger.

The ex unit is supposed to be defined by the font's x-height. However, most browsers simply halve the font size to compute the x-height. Pixels ( px ) correspond to the pixels on the user 's screen, which depends on its resolution. Macs typically have 72 dpi displays, although this isn't guaranteed because font sizing percentage values are relative to another value and work like the em unit.

In practice, most authors use px , em , or % to specify relative length units. Because pixels are resolution dependent, using em and % are the most flexible ways to specify font sizes. For example:

 p { font-size: 1.1em } 

Embrace Your Relatives

Relative units automatically scale to the environment in which they are displayed, so they're more suitable for the screen. Designers on the web have no way of knowing beforehand in which resolution, display size, or user settings their pages will be viewed . Relative units automatically adjust to user font size preferences, and they are more accessible than absolute sizes.

You'll read stories about bugs that occur when people use em or percentages to specify font sizes, but these are relatively minor for the majority of browsers in use today. Using pixels to specify font sizes may work everywhere, but it is not a true relative length unit and it defeats one of primary goals of CSS: flexibility.

Absolute Length Units

Absolute units are fixed units of measurement, and they are useful only when you know the dimensions of the output medium; for example, a sheet of 8.5" x 11" paper. They do not scale to the user's display. Although they make a poor choice for the screen, absolute units are perfect for defining style sheets for printed documents. In CSS, the absolute units are as follows : in (inches), cm (centimeters), mm (millimeters), pt (points), and pc (picas). The same optimization techniques you learn in this chapter can be applied both to print and aural style sheets.

Length Units Summary

For maximum flexibility, use em or % to define font sizes. When defining widths for div s, etc., beware of using em s, because Netscape 6 does not automatically scale when the user adjusts the font size (although Netscape 7+ does). Percentage widths do scale properly in Netscape, Explorer, and Opera. Use as few fonts and sizes as possible. Take advantage of inheritance, and set your font properties as high up the document tree as possible. For example:

 body { margin: 0.5em; font: 1em serif }