13.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

  • 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 the height of the letter x:

 story { line-height: 1.5ex} 

Pixel is also a relative unit, although 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 most users' monitors.

One very useful technique is to specify lengths as percentages of some other length, which 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% } 

XML in a Nutshell
XML in a Nutshell, Third Edition
ISBN: 0596007647
EAN: 2147483647
Year: 2003
Pages: 232

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net