There's an even better way to setline-height, as it turns out, and that's touse a raw number as the value of line-height. Thisis so much better because the number is used as a scaling factor, andit is the factor that is inherited, not the computed value.Let's say you want the line-height of allelements in a document to be one-and-one-half times theirfont-size. You would declare:

Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:15 PM

3.3. Percentage Values

Compared to length units, percentage units are almost laughably simple. They're pretty much exactly what you'd expect -- a positive or negative number, followed by a percent sign (%). For example:

H1 {font-size: 18pt;}
H1.tall {line-height: 150%;}

This sets the line-height of all H1 elements with a class of tall to be half again as large as normal, as we see in Figure 3-8.

Figure 3-8

Figure 3-8. Line height of 100% (top) and 150% (bottom)

Percentage values are always computed relative to another value -- usually a length unit. In this case, the line-height is exactly 27 points (18pt times 1.5). This is the same as setting the line-height to 1.5em , although neither method is particularly recommended over the other.

Percentages can, in general, be either positive or negative. However, there are properties that accept percentage values, but will not permit negative values (of any kind, including percentages). These will be mentioned as the properties are covered in subsequent chapters.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

6.2.5. Getting Attached

Okay, so we can place the origin image for the background anywhere in the background of an element, and we can control (to a degree) how it tiles. As you may have already realized, setting an image to be in the center of the document may mean, given a sufficiently long document, that the background image isn't initially visible to the reader. After all, a browser only provides a window onto the document. If the document is too long to be displayed in the window, then the user can scroll back and forth through the document. The center could be two or three "screens"right margin of 20 pixels, a bottom margin of 15 pixels, and a left margin of 5 pixels, here's all we need:

H1 {margin: 10px 20px 15px 5px; background-color: silver;}

As Figure 7-8 reveals, we have what we wanted. The order of the values is obviously important, and follows this pattern:

margin: top right bottom left
Figure 7-8

Figure 7-8. Uneven margins

A good way to remember this pattern is to keep in mind that the four

8.2.4. Block-Level Replaced Elements

Block-level replaced elements are also subject to a few differences in how formatting is handled. The most important is that replaced elements are assumed to have an intrinsic height and width; for example, an image will be a certain number of pixels high and wide. Given this, if either height or width are set to auto for a replaced element, then the value tag and then insert <BR> tags to specify exactly where you do want the line breaks to occur.  You can also include <WBR> tags to indicate where optional line breaks may occur if the line extends beyond the right edge of the browser window. 

The preferred way to control text alignment is by including an ALIGN attribute in a block-level tag such as a paragraph <P ALIGN="left">, headline, e.g., <H2 ALIGN="center"> or page division <DIV ALIGN="right">.  Each of these should terminate with a corresponding similar to the somewhat famous JavaScript "rollover" trick, where images change when the pointer hovers over them. Thanks to :hover, you can specify a hover style very easily:

A:link {background: white; color: blue;}
A:hover {background: blue; color: white;}

These styles will cause anchors to "reverse" in color when the mouse pointer hovers over them, as illustrated in Figure 10-9.