Saturday 25th of June 2016 07:04:06 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: 9.1.4.3. Element clipping
element selectors: 2.1.1. Rule Structure
elements
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): 3.2.2.1. 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): 3.2.2.1. 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
loading
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)
Thus, if an image is 150 pixels wide, and itswidth property is set to the valueauto, then its width willevaluate to 150px , as shown in Figure 8-26:

IMG {display: block; width: auto;}
Figure 8-26

Figure 8-26. Replaced elements with auto width are rendered using their intrinsic size

Replaced elements can have their height andwidth set to a value other thanauto or their intrinsic dimensions. This is most


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.

You can take advantage of the fact that line-height can be set for any element, including inline elements. Let's return to our previous example and make one small change by adding a line-height to the styles for the BIG element. We'll also change the line-height of the P element from 23pt to 27pt. This will have the result shown in Figure 4-28:

BODY {font-size: 10pt;}
P {font-size: 18pt; line-height: 27pt;}according to the location of the bottom of theDIV. As we can see, the end of theDIV is actually above the visual bottom of itschild paragraph. The next element after the DIV isthe appropriate distance from the bottom of theDIV. The fact that it overlaps the paragraphdoesn't matter, at least not technically.

Now let's consider an example where the margins of a list item,an unordered list, and a heading are all collapsed. In this case, the