Friday 31st of October 2014 12:06:12 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Index

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



8.4.2.2. Adding box properties

As we're awarefrom previous discussions, padding, margins, and borders may all beapplied to inline nonreplaced elements, and they don'tinfluence the line-height at all. If we were toapply some borders to a SPAN element without anymargins or padding, we'd get results such as that shown in src="../../gifs/smnavbar.gif" usemap="#library-map" border="0" alt="Library Navigation Links" >

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

the image, whereas the "second" is tall enough to containthe image, its padding, and its border. This is because the totalityof the replaced element (content, padding, borders) make up theinline box for the replaced element. This is what forces the lineboxes to be taller in Figure 8-66.

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

floatIE4 P/B IE5 P/Q NN4 P/P Op3 B/-

Sets the float direction for an element. This is generally applied to images in order to allow text to flow around them, but under CSS1 any element may be floated. Note that, for elements such as paragraph, floating the element will cause its width to tend toward zero unless an explicit width is assigned; thus, width assignment is a crucial part of floating any nonreplaced element.

Example

IMG {float: left;}
the same font face as 700, there is no visibledifference between normal H1 text and boldfacedH1 text, but nonetheless the weights aredifferent.

In the last example, paragraphs are set to be the lightest possiblefont weight, which we assume exists as a Light variant. Furthermore,the other faces in this font family are Regular and Bold. AnyEM text within a paragraph will evaluate tonormal, since that is the next-heaviest faceitalic and oblique text. Forthat, it's easiest to turn to Figure 5-24,which illustrates the differences very clearly.

Figure 5-24

Figure 5-24. Italic and oblique text in detail

Basically, italic text is in some way its own font, with smallchanges made to the structure of each letter to account for thealtered appearance. This is especially true of serif fonts, where inaddition to the fact that the text characters "lean," theserifs may be altered in an italic face. Oblique text, on the other