Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of April 2017 06:23:35 AM

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.



the trouble -- but it can also be rewarding. It takes a good dealof practice, and many mistakes, to learn to tell the differencebetween the two.

7.3.7. Margins and Inline Elements

So far, we've only talkedabout how margins apply to block-level elements like paragraphs andheaders. Margins can also be applied to inline elements, although the Library Navigation Links

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

A perfect example is an unordered list, in which the list items follow one another. Assume that the following is declared for a list that contains five list items:

LI {margin-top: 10px; margin-bottom: 15px;}

Thus, each list item has a 10-pixel top margin and a 15-pixel bottom margin. However, when the list is rendered, the distance between adjacent list items is 15 pixels, not 25. This is because along the vertical axis, adjacent margins are said to be collapsed. In other words, the smaller of the two margins is eliminated in favor of the

UL LI {list-style-image: url(big-ohio.gif);}
Figure 7-82

Figure 7-82. Using really big images as bullets

You should usually provide afallback for the bullet type. Do this justin case your image doesn't load, or gets corrupted, or is in aformat that some user agents might not be able to display (as is thecase in Figure 7-83). Therefore, you should alwaysdefine a backup list-style-type for the list:

space around an image. Let's say you want 1 em of space surrounding all images:

That's all it takes.

There may be times where you want a different amount of space on each side of an element. That's simple as well. If we want all H1 elements to have a top margin of 10 pixels, a right margin of 20 pixels, a bottom margin of 15 pixels, and a left margin of 5 pixels, here's all we need: