Thus, there are only two pixels between the bottom of the list item's content and the top of the paragraph's content. This is what we see in Figure 8-24.

Figure 8-24

Figure 8-24. Collapsing margins and negative margins, in detail

There is one area of unresolved behavior, which is this: if elements overlap each other due to negative margins, which elements are "on top?" You'll note that few of the examples in this section use background colors for all elements. That's because if they did, content might get overwritten by the background gratis treffen kostenlos dating und flirten chat Wednesday 13th of December 2017 08:02:14 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

Index: Q

quotation marks
double ( ): 1.4.6. Inline Styles
curly, in generated content: 10.4. Generated Content
in font-family declarations: 5.1.3. Using Quotation Marks
single ( ): 5.1.3. Using Quotation Marks

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.

DIV OL>LI EM {color: purple;}

This rule matches any EM text that is a descendant of a list item, as long as that list item is a child of an OL element that is a descendant of a DIV. (Note also that there is no whitespace around the > symbol this time, which is legal; whitespace around this symbol is optional.) Thus:

The purple EM text is purple because it's the great-grandchild of an LI that is the direct what's shown in Figure 9-2.


What's depicted in Figure 9-2, and in most ofthe examples in this chapter, will only work if the containing blockwas established by an element with an explicitly defined height. Thisis because a line in the specification says that if the height of thecontaining block is not explicitly specified -- say, for example,that it's dependent on the content of the element, as in anormal paragraph -- then both top and

INPUT[type="radio"] {color: #333333;}INPUT[type="checkbox"] {color: #666666;}<INPUT TYPE="radio" NAME="r2" VALUE="A "><INPUT TYPE="checkbox" NAME="c3" VALUE="one ">

This allows you to dispense with the classes altogether, at least inthis instance. See the Chapter 10, "CSS2: A Look Ahead", for more detailson how this kind of selector works.