Wednesday 13th of December 2017 08:02:39 PM

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 usemap="#banner-map" border=0 alt="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)


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.

using a negative value for right) or by specifyinga padding for the paragraph that is wide enough to accommodate thepositioned element. Also, since it has a transparent background, theparent element's text shows through the positioned element. Theonly way to avoid this is to set a background for the positionedelement.

Note that the boldface element in this case is positioned in relationto its parent element's content box, which defines itscontaining block. Without the relative positioning of the parent what's shown in Figure 7-27. The overlappingtext is not a mistake on Explorer's part -- it's doingexactly as you specified. Basically, there isn't an easy way tocircumvent this problem, although two possible approaches aredetailed in Chapter 11, "CSS in Action".

Figure 7-27

Figure 7-27. Overlapping text in Explorer

It gets worse, unfortunately. If you apply margins to inlineelements, as was discussed previously, you'll get results fromNavigator 4.x like those shown in Figure 7-28.