Uncollapsing Margins

原文地址： http://www.complexspiral.com/publications/uncollapsing-margins/

1. Guide

　　Consider a series of paragraphs that have the following style applied to them:

p {margin: 10px 0; background: #CCC;}

　　The separation between the outer border edges of these paragraphs will be ten pixels, as shown in Figure 1.

　　　　

　　The gap of the two p elements is 10px.Why is this? Because it's what authors would tend to expect.

　　CCS 2.1: 

　　　　In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.Horizontal margins never collapse.

　　　　Adjoining vertical margins collapse, except:　　　

　　　　　　a. Margins of the root element's box do not collapse.

　　　　　　b. If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

　　　　Two margins are adjoining if and only if:

　　　　　　a. both belong to in-flow block-level boxes that participate in the same block formatting context

　　　　　　b. no line boxes, no clearance, no padding and no border separate them

　　　　　　c. both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

　　　　　　　　.top margin of a box and top margin of its first in-flow child;

　　　　　　　　.bottom margin of box and top margin of its next in-flow following sibling;

　　　　　　　　.bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

　　　　　　　　.top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed'height', and no in-flow children

 

2. Uncollapsing solution

　　In order to "un-collapse" the margin, there are two basic solutions: padding or borders, you need to apply the padding or border to the masthead itself.　

<div id="masthead">
<h1>ConHugeCo</h1>
<p>Making the world safe for super sizes</p>
</div>

#masthead {background: #F80; margin: 10px; padding: 1px 0;}
#masthead h1 {margin: 20px 10px;}
#masthead p {margin: 5px 10px; font-style: italic;}

　　Because of the padding, the margins of the h1 and p elements do not collapse with the margins of the masthead. They are instead "contained" within the masthead's content area. This is in accordance with CSS2.1, section 8.3.1[1], but the behavior actually goes back to CSS1. 

　　Another way to keep the margins contained is to set a border on the masthead. This border can be the same color as the page background, thus making it effectively invisible. For example:

#masthead {background: #F80; margin: 10px; border: 1px solid #FFF;}
#masthead h1 {margin: 20px 10px;}
#masthead p {margin: 5px 10px; font-style: italic;}

 

3. sumarry

　　In the majority of cases, margin collapsing delivers the types of layout results we want. It's only in those cases where we want margins to be "contained" by other elements that things can go a bit awry. Thanks to the way CSS is written, however, there are ways to overcome the unwanted collapsing. By associating either padding or a border with an element, it will "contain" the margins of descendant elements.