Saturday 23rd of May 2015 06:12:35 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book inline box for the replaced element. This is what forces the line boxes to be taller in Figure 8-66.

Margins are also contained within the line box, but they have their own wrinkle. Setting a positive margin is no mystery: it will simply make the line box taller, as in Figure 8-67.

Figure 8-67

Figure 8-67. Adding padding, borders, and margins to an inline replaced element

Setting negative margins, meanwhile, has exactly the effect you might expect: it makes the line-box shorter. This is


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

the next-heavier face, which is, of course, the Bold face.

font-weight is inherited, so if you set a paragraph to be bold, then all of its children will inherit that boldness, as we see in Figure 5-9. {font-weight: bold;}
Figure 5-9

Figure 5-9. Inherited font weight

This isn't unusual, but the situation gets interesting when you use the last two values we have to discuss: bolder

P {font-size: 12px; line-height: 1.5;}
SMALL {font-size: 66%;}
BIG {font-size: 200%; line-height: 1em;}


Anything this useful has to have a drawback, right? As it happens, Internet Explorer 3.x will treat scaling factors as though they were pixel units. Just try to imagine a paragraph with a line-height of 1.5px . It isn't pretty. the first paragraph to have a background, as has been done in Figure 7-68.

Figure 7-68

Figure 7-68. Floating images and element backgrounds

There is nothing different about the second example, except for the visible background. As you can see, the floated image sticks out of the bottom of its parent element. Of course, it did so in the first example, but it was less obvious there because we couldn't see the background then. There is nothing forbidden about this behavior.