Friday 31st of October 2014 04:30:11 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
  • When an element's box is taller than the height explicitly setfor its parent.

  • When an element has been absolutely positioned.

  • The default value of visible means that thecontent may be visible outside the element's box. Typically,this would lead to the content simply running outside its own element Preface
    Chapter 1: HTML and CSS
    Chapter 2: Selectors and Structure
    Chapter 3: Units and Values
    Chapter 4: Text Properties
    Chapter 5: Fonts
    Chapter 6: Colors and Backgrounds
    Chapter 7: Boxes and Borders
    Chapter 8: Visual Formatting
    Chapter 9: Positioning
    Chapter 10: CSS2: A Look Ahead
    Chapter 11: CSS in Action
    Appendix A: CSS Resources
    Appendix B: HTML 2.0 Style Sheet
    Appendix C: CSS1 Properties
    Appendix D: CSS Support Chart

    Library Navigation Links

    Copyright © 2002 O'Reilly & Associates. All rights reserved.

    B {padding-left: 10px; padding-right: 10px; background: silver;}
    Figure 7-60

    Figure 7-60. Padding on an inline element

    Note the extra background space that appears on either end of the boldfaced text. There's your padding.

    This all seems familiar enough, even when the boldfaced text stretches across multiple lines. Turn to Figure 7-61 to see what happens with padding set on an inline element displayed across multiple lines: background color when using a background image, so that your white text will at least be visible:

    P.starry {background-image: url(;
    background-color: black; color: white;}
    <P CLASS="starry">It's the end of autumn, which means the stars will be
    brighter than ever!  Join us...

    Besides, if you have the image do something other than fully tile across the entire background of the document, then you'll need a color to cover the parts that the image doesn't. Speaking ofoverlaps the some of the content. There is no way to avoid this, short of positioning the boldfaced text outside of the paragraph (by using a negative value for right) or by specifying a padding for the paragraph that is wide enough to accommodate the positioned element. Also, since it has a transparent background, the parent element's text shows through the positioned element. The only way to avoid this is to set a background for the positioned element.

    Note that the boldface element in this case is positioned in relation