Thursday 19th of January 2017 01:51:07 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

In the simplest case, the clipping region for any positioned elementis the content area of the element itself, as depicted in Figure 9-10. However, you may wish to change the clippingarea. That's what we'll do in the next section. Overflow clipping

Insituations where the content of an element overflows its element box,and overflow has been set such that the content 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.

is one major difference between margins and padding when it comes to inline elements. Let's turn things around and talk about left and right padding first off. Here, if we set values for the left or right padding, they will be visible, as Figure 7-60 makes apparent.

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.

Similar to rule 4, this keeps a floated element from floating all the way to the top of its parent element. Thus, if a DIV 's first child element is a paragraph, followed by a floated image and then another paragraph, the top of the floated image can't be any higher than the top of the paragraph that precedes it. It is also impossible for a floated element's top to be any higher than the top of a floated element that occurs earlier. Figure 8-34 is an example of this. image to be repeated in the horizontal or vertical directions,respectively, and no-repeat prevents the imagefrom tiling in any direction.

By default, the background image will start from the top left cornerof an element. (We'll see how to change this later in thechapter.) Therefore, the following rules will have the effect seen inFigure 6-28:

BODY {background-image: url(yinyang.gif);