Friday 23rd of February 2018 10:56:49 AM

Background String literal = aliceblue
Background Triplet = 0F08FF

Foreground String literal = aliceblue
Foreground Triplet = 0F08FF

LI {margin-top: 10px; margin-bottom: 15px;}

Thus, each list item has a 10-pixel top margin and a 15-pixel bottommargin. However, when the list is rendered, the distance betweenadjacent list items is 15 pixels, not 25. This is because along thevertical axis, adjacent margins are said to be collapsed. In otherwords, the smaller of the two margins is eliminated in favor of thelarger. Figure 7-16 shows the difference betweencollapsed and uncollapsed margins.

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Finally, a problem related to, but not exactly about, CSS. Some authors have reported trouble with getting their web hosts to correctly serve up external style sheets. Apparently, with some web servers, the file extension .css is mapped to the MIME type x-application/css, or "Continuous Slide Show," instead of the MIME type text/css. Even older servers may not have any mapping for .css, and so will serve up the files asjustify, 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

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.

PRE, with whitespace and returns preserved.nowrap prevents an element from line breaking.


TD {white-space: nowrap;}TT {white-space: pre;}
widthIE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-

Used to setthe width of an element. This is most often applied to images, butcan be used on any block-level or replaced element. Negative valuesare not permitted.

Figure 7-67

Figure 7-67. Floating an image

Nothing unusual there, of course, but look what happens when we setthe 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 thevisible background. As you can see, the floated image sticks out ofthe bottom of its parent element. Of course, it did so in the firstexample, but it was less obvious there because we couldn't seethe background then. There is nothing forbidden about this behavior.