Sunday 18th of March 2018 03:02:20 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
and the top margin of a succeeding H1 is 28pixels. Given all this, once the margins have been collapsed (or, ifyou prefer, overlapped), the distance between the end of theLI and the beginning of the H1is 28 pixels, as shown in Figure 7-17.

Figure 7-17

Figure 7-17. Collapsing in detail

This collapsing behavior only applies to margins. Padding andborders, where they exist, are never collapsed by anything.

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
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.

add a background color, as shown in Figure 7-58:

H1 {padding: 10px 0.25em 3ex 3cm; background: silver;}
H2 {padding: 0.5em 2em; background: silver;}
Figure 7-58

Figure 7-58. Uneven padding with background colors

As Figure 7-58 demonstrates, the background of an element extends into the padding. As we discussed before, it also extends to the outer edge of the border, but the background has to go through the padding before it even gets to the border. Generating a line box

Here are the steps a user agent has to go through in order to generate a line box. First, for each inline nonreplaced element (or string of text outside of an inline element), the font-size is used to determine the initial content-height. Thus, if an inline element has a font-size of permit floated elements to either side, one H2 in particular has been set so that it does permit floated elements on either side:

H2 {clear: both;}
<H2 STYLE="clear: none;">Not Cleared!</H2>
Figure 7-78

Figure 7-78. Not clear at all

clear works by increasing the top margin of an element so that it ends up below a floated element, so any margin width set for the top of a cleared element should be effectively already realized, rather unfortunate. It is based on an early draft of the positioning section, which used the top-left-offset scheme. Internet Explorer implemented this before CSS2 was made a full Recommendation, and so came into conflict with a last-minute change that made rect(...) use side-offsets, just like the rest of CSS2. This was done, reasonably enough, because it would make positioning consistent with itself.

By then, however, it was too late: there was an implementation in the marketplace, and rather than force Microsoft to change the browser 15em, of course!).

We can turn this around to keep elements from getting too wide or tall by using max-width and max-height. Let's consider a situation where, for some strange reason, we want an element to have three-quarters the width of its containing block, but to stop getting wider when it hits 400 pixels. The appropriate styles are:

left: 0%; right: auto; width: 75%; max-width: 400px;