Since the line-height for the "tall"text is less than its font-size, the inline boxfor that element is smaller. This will change the placement of thetext itself, since the top of its inline box must be aligned with thetop of the line box for its line. Thus we get the result shown inFigure 8-55.

Figure 8-55

Figure 8-55. The effects of a very small inline box

On the other hand, we could set the "tall" text to have aline-height which is actually bigger than its Thursday 28th of August 2014 03:04:32 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book


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.

IMG {margin: 1em;}

That's all it takes.

There may be times where you want a different amount of space on eachside of an element. That's simple as well. If we want allH1 elements to have a top margin of 10 pixels, aright margin of 20 pixels, a bottom margin of 15 pixels, and a leftmargin 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

8.4.2. Inline Formatting

As we saw in Chapter 4, "Text Properties", all elements have aline-height. This fact has a great deal to do withhow inline elements are displayed, and it needs to be covered indetail before we move on.

influences the generation of element boxes, which means that floatsindirectly do affect these boxes.

Some particulars can help explain some of this behavior. An elementthat has been floated becomes a block-level element, regardless of itsprevious status. Thus, if an image (which is ordinarily treated as aninline element) is floated, it becomes a block-level element. Thisblock-level status helps explain why when an element is floated,other content flows around it.