Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of October 2016 02:15:32 PM
surrounds the content and padding of an element. Thus, the background of the element will stop at the outer edge of the border, since the background does not extend into the margins, and the border is just inside the margin. The CSS specification strongly implies that the background extends to the outside edge of the border, since it talks about the borders being drawn "on top of the background of the element," but not all browsers seem to agree. This is important because some borders are "intermittent" -- for example, dotted and dashed styles -- and the element's background should appear in the spaces between the visible portions

Copyright © 2000 O'Reilly & Associates, Inc. All rights reserved.

Printed in the United States of America.

Published by O'Reilly & Associates, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly & Associates, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O'Reilly & Associates, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. The association between the image of a koala and the topic of HTML and XHTML is a trademark of O'Reilly & Associates, Inc.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

Library Navigation Links

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

thing, so it's best to avoid this altogether.

Even worse, if you try applying padding to inline elements inNavigator 4.x, you get a huge mess. The same sorts of things thathappen when you apply margins to inline elements will happen if youapply padding, so it is wise to avoid setting margins, borders, orpadding on inline elements.

Opera 3.5 incorrectly permits negativevalues for padding, but version 3.6 does notbeginning of the element, and the right border to the end of it.Borders are not necessarily applied in thisfashion; they can also be applied to the right and left side of eachline in the element, if the situation seems to demand it. Forexample, a grooved border might look better enclosed on each lineend, as shown in Figure 7-55.

Figure 7-55

Figure 7-55. An inline element with a border displayed across multiple lines of text, with the border boxes closed

It's also acceptable for the lines to be "open" asshown in Figure 7-54.collapsed. If you somehow manage to have two block-level elementsnext to each other, and each has a margin, the margins will notcollapse. The easiest way to illustrate this principle is to setmargins on two images and then have them appear on the same line, asthey do in Figure 8-6:

<IMG SRC="test1.gif" STYLE="margin: 5px;" ALT="first test"><IMG SRC="test2.gif" STYLE="margin: 5px;" ALT="second test">

(Note that the images in Figure 8-6 are actuallyinline elements, but they effectively demonstrate that horizontallywill be set to be whatever is needed to reach the required total (that is, the content width of the parent element). The following markup is displayed as shown in Figure 8-13:

P {margin-left: 100px; margin-right: 100px; width: auto;}
Figure 8-13

Figure 8-13. Automatic width

This is the most common case, in fact, since it is equivalent to setting the margins and not declaring anything for the width. The result of this markup is exactly the same as that shown in Figure 8-13: