Turn to Figure 7-25 to see what happens when an inline element with a margin is displayed across multiple lines:

B {margin: 10px; background: silver;}

Figure 7-25. An inline element displayed across two lines of text with a 10-pixel margin

The left margin is applied to the beginning of the element, and the Saturday 04th of September 2010 06:42:56 AM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

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

Viewed in this way, the hex-pair method is a lot like the method we previously discussed -- the one involving numbers from to 255. In fact, 255 in decimal is equivalent to FF in hexadecimal, which explains a lot about how this method works. It's really the same as the last method: it just uses a different number system. If you have to pick between the two, use whichever makes you more comfortable.

So, similar to the way you can specify a color using three numbers from letter-spacing: 0.75em; text-align: right; padding-right: 1em;}

Figure 11-15 shows us our progress so far.

Figure 11-15. The styled title: a work in progress

We're getting close; in fact, the only thing left is that first letter of the title. We can easily handle it with a :first-letter selector, so let's do that. The "S" is about twice the size of the "K" in "Kats," so we set the following:

H1 {font: 300% Helvetica,sans-serif; font-variant: small-caps;justify, then each line box would be forced to beas wide as the paragraph's content area. The difference is madeup in letter- and word-spacing, as we see in Figure 8-49.
Figure 8-49. Line-box layout with full justification
That pretty well covers how line boxes are generated, at least in thesimplest cases. As we're about to see, however, the inlineformatting model is not exactly simple. 

H1 {border: thick silver solid;}
The drawback with border is that you can onlydefine "global" styles, widths, and colors. In otherwords, the values you supply for border will applyto all four sides equally. If you want the borders to be differentfor a single element, you'll need to use some of the otherborder properties. Of course, it's possible to turn thecascade to your advantage:

Figure 8-37. Given the other constraints, go as high as possible
WARNING
Unfortunately, since there is no precise definition meaning for"as high as possible" (which could be, and in fact hasbeen, argued to mean "as high as conveniently possible"),you cannot rely on consistent behavior even among browsers that areconsidered CSS1-compliant. Most browsers will follow historicalpractice and float the image down into the next line, but afew -- Opera 3.6, for one -- will float the image into thecurrent line if it has room to do so.