Collapsing Margins


The margins above and below elements are not simply added together to reach a total amount of space between the two elements. If they were, you'd often end up with a bit more space between elements than you want. Instead, the browser discards the smaller margin and uses the larger margin to space apart the two elements. This process is called collapsing margins. Collapsing margins affects only the top and bottom margins.

For example, suppose a P follows an H1 a common situation and that the P has less space above it than the H1 has below it also common. To be more specific, assume the P has 1pc (1pica = 12pt) space above it and the H1 has 2pc space below it. The browser discards the 1pc space and puts only 2pc space between the two elements; it does not add the two and use the total (3pc space).

Collapsing margins ensure that space is consistent between any pair of elements. In another example, a list (UL or OL) normally has more space above it than a P does, but when either follows an H1, designers usually want the same amount of space above both. By the browser's going with the larger H1 margin, this can be accomplished.

The browser reacts similarly when two elements begin or end at the same time. For example, at the end of a list, usually three elements end at the same time: the last list item, the last paragraph within that item, and the list itself. There is one element, P, that begins at the same time as the other three are ending. Here is an example:

 <UL>   <LI><P>The first item in a list.     <P>A paragraph below the first item of     the list. <UL>   <LI><P>The second item in the list.     <P>The last paragraph of the last item of     the list. </UL> <P>Start of next paragraph. This paragraph is not part of a list.

The space between the last line of the list and the first line of the paragraph that follows it will be the maximum of four margins:

  1. The bottom margin of the last P in the LI

  2. The bottom margin of the last LI

  3. The bottom of the UL

  4. The top margin of the P that follows the list

Normally, the UL is the largest, so that is the amount of margin that will be placed between the end of the list and the beginning of the next paragraph. Figure 8.12 illustrates this situation using these rules:

 P { margin-bottom: 0em } LI { margin-bottom: 0.6em } UL { margin-bottom: 1.2em } P { margin-top: 0em }

Figure 8.12. A demonstration of collapsing margins.


However, there's a twist to collapsing margins: Margins collapse only if they touch each other. In the previous example, we assumed that there was no padding or border. Hence, the margins touch. However, if either or both of the UL or the LI has a nonzero padding or a border, the margins no longer touch. Hence, they no longer collapse because something padding or border separates them.

For example, a style sheet like this:

P { padding-top: 5px; padding-bottom: 5px }

keeps any two paragraphs 10px apart (possibly more if there are other paddings and margins to consider).



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net