Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 29th of April 2016 02:01:58 PM

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.

This rule prevents floated elements from overwriting each other. If an element is floated to the left, and there is already a floated element there due to its earlier position in the document source, then the latter element is placed against the outer right edge of the previously floated element. If, however, a floated element's top is below the bottom of all earlier floated images, then it can float all the way to the inner left edge of the parent. Some examples of this are shown in Figure 8-31.

Figure 8-31

Figure 8-31. Keeping floats from overlapping

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.


<P STYLE="font-size: 12px; line-height: 12px;">
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE="font-size: 24px;">boldfaced</B>
and <SPAN STYLE="vertical-align: top; line-height: 4px;">tall</SPAN>
and which is<BR>
larger than the surrounding text.

Since the line-height for the "tall" Adding box properties

After everything else, applyingmargins, borders, and padding to inline replaced elements almostseems simple.

Padding and borders are applied to replaced elements as normal;padding inserts space around the actual content (for example, a the style is set to none, not only does the border's style go away, so does its width! Why?

If you'll remember, the terminology used in the previous section was that a border with a style of none does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely backward, but it actually makes a great deal of sense. After all, ifaffecting how margins are collapsed. If there are negative verticalmargins, then the browser should take the absolute maximum of thenegative margins and subtract that from the maximum of any positivemargins.

In the case where there are only two margins to be collapsed, onepositive and the other negative, the situation is handled in a fairlysimple manner. The absolute value of the negative margin issubtracted from the positive margin -- or, to put it another way,the negative is added to the positive -- and the resulting value