Monday 22nd of September 2014 10:08:41 AM

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

Index: E

element boxes: 7.1. Basic Element Boxes
8.1. Basic Boxes
element clipping: Element clipping
element selectors: 2.1.1. Rule Structure
classification of: 2.9. Classification of Elements
floated (see floated elements)
overlapping, altering: 9.5. Stacking Positioned Elements
styling common: 11.2.4. Styling Common Elements
visibility of: 9.1.5. Element Visibility
elevation property: 10.8.2. The Spoken Word
em box: 5.3. Font Size
em-height (em): em and ex units
em length value: 5.3.3. Percentages and Sizes
em square: 5.3. Font Size
embedded style sheets: 1.4.2. The STYLE Element
ex-height (ex): em and ex units
Extensible Markup Language (see XML)
external style sheets: 1.4.1. The LINK Tag
are in the minority.) For instance, IE4 Y/N means that the propertyis supported in IE4 for Windows, but not IE4 for Macintosh. Thepossible support values are:

Style declaration is made important,thereby raising its weight in the cascade. Important declarationsoverride all others. In CSS1, important author styles override allreader styles, even important ones. In CSS2, this is reversed, sothat important reader styles always win out over the author'sstyles, important or otherwise.
creating: 11.1.1. Case 1: Consistent Look and Feel
with @import directive: 1.4.3. The @import Directive
with LINK element: 1.4.1. The LINK Tag
extra space around elements, adding: 7.2. Margins or Padding?
7.2. Margins or Padding?
(see also margins)

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.

box for the preceding line. This will give us a paragraph as shown in Figure 8-52.

Figure 8-52

Figure 8-52. The final paragraph of stacked line boxes

As we can see, the middle line is taller than the other two, but it still isn't big enough to contain the text within it. That's because the position of the inline boxes in the line forces it to be taller than 12 pixels, but the line-box still isn't tall enough for the text to avoid overlapping other lines. with the following styles (illustrated by Figure 9-12):

overflow-clip: rect(-0.25in, auto, auto, -0.25in);
Figure 9-12

Figure 9-12. Expanding the clipping area

This doesn't do much good, as you can see. The clippingrectangle extends up and to the left, but since there isn't anycontent there, the visual effect is the same as if the author haddeclared overflow-clip: auto.

On the other hand, it might be okay to go beyond the bottom and right the only real way in which margins affect line-breaking.

To understand why, let's go back to the paper-and-plastic analogy employed in the previous section. Think of an inline element as a strip of paper with marginal plastic surrounding it. Displaying the inline element on multiple lines is like cutting up the strip into smaller strips. However, no extra plastic is added to each smaller strip. The only plastic used is that which was on the strip to begin with, so it only appears at the beginning and end of the inline element.margins to be auto -- except for the left margin, which should be 3em :

H2 {margin: auto auto auto 3em;}

Again, we got the effect we wanted. The problem is all that typing of auto gets a little tedious. After all, all we want to do is affect the margin on one side of the element as shown in Figure 7-14, which leads us to the next topic.

Figure 7-14

Figure 7-14. Setting a new value for just the left margin

font-weight one notch up the numeric scale (800). Furthermore, if we were to insert a STRONG element into the B element, it would come out like
Figure 5-14:

100 <SPAN> 400 <STRONG> 700 <B> 800 <STRONG> 900
Figure 5-14

Figure 5-14. Weight numbers, again