the value of width) of the paragraph, plus itsleft and right padding, borders, and margins, always add up to thewidth of the DIV 'scontent, as illustrated in Figure 8-7.
Thus, if the width of the DIVis 30em , then the sum total of the content width,padding, borders, and margins of each paragraph will be30em. In Figure 8-7, theSaturday 07th of December 2013 10:43:53 AM
by Eric A. Meyer
First edition, published May 2000.
(See the catalog page for this book.)
Search the text of Cascading Style Sheets: The Definitive Guide.
Copyright © 2002 O'Reilly & Associates. All rights reserved.to its parent element's content box, which defines itscontaining block. Without the relative positioning of the parentelement, the containing block would be another element. Consider acase where the element being positioned is a child of theBODY element, e.g., a paragraph or headingelement. With the right styles, the containing block for thepositioned element will be the entire BODYelement. Thus, applying the following styles to theBODY and the fifth paragraph in a document wouldlead to a situation similar to that shown in Figure 9-20:
In this case, it's up to the user agent, but the CSS specifications explicitly state that user agents are not required to reflow previous content to accommodate things that happen later in the document. In other words, if an image is floated up into a previous paragraph, it may simply overwrite whatever was already there. On the other hand, the user agent may handle the situation by flowing content around the float, even though doing so isn't required behavior. Either way, it's probably a bad idea to count on a particular behavior, which makes the utility of negative margins on floats rather limited. Hanging floats are probably fairlyusing a monitor) to the outside of each line box. Since the line boxes are touching each other, their borders will overlap as shown in Figure 8-46.
If we alter the SPAN styles to have a background color, the actual placement of the line boxes becomes quite clear, as we can see in Figure 8-47.
Here we see that not every line reaches to the right edge of the