Collapsing Margins

     前端开发中总会遇到这样那样的问题，而margin collapsing（我译为边距重叠）总会给你带来惊喜：或者是需要紧连着的元素怎么中间突然多了一块空白；或者是我需要边距的地方它给我去除了。这些都源于CSS的margin collapsing。

     首先熟悉一下margin collapsing的概念，下面是W3G CSS 2.1的定义：

8.3.1 

In this specification, the expression  means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

In CSS 2.1,  never collapse.

 may collapse between certain boxes:

• Two or more adjoining vertical margins of block-level boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.

         以普通布局邻接的盒元素按照两者间最大的margin 重叠，如果有一个盒元素是负值，则结果margin为两者相加的绝对值，如果都是负值，则为0

• Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

         float 盒元素与其他盒间的margin不重叠

• Vertical margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

        新建的块结构和内部子元素不重叠

• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

        absolute 布局的盒元素不重叠margin

• Margins of  elements do not collapse (not even with their in-flow children).

        inline-block 不

• If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
  • If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
  • Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

                如果元素的与它的父元素的上边距重叠，那么它的上边框和它父节点的上边框相同

                否则，或者是元素不与父元素重叠，或者只和父元素的下边距重叠，它的上边框和它的下边框相同

 

An element that has clearance never collapses its top margin with its parent block's bottom margin.

               有间隙的元素的上边距与父元素的下边距不重叠

Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

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

          根元素的边距不重叠

The bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

         块级 in-flow 元素的下边距总是与下一个邻接的块级元素重叠，除非它有间隙

The top margin of an in-flow block box is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

        块级 in-flow元素的上边距与它的第一个子元素的上边距重叠，前提是它没有上边框，上间距，和子元素没有间隙

The bottom margin of an in-flow block box with a 'height' of 'auto' is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.

       高度设为：auto 的块级 in-flow 元素的下边距与它的最后一个子元素的下边距重叠，前提是无边框，无间距

 

An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining.

       可邻接的边距是指该元素的‘min-height’为0，并且无上下边框，无上下间距，‘height’设置为0或者是auto，不能包含有line box，并且它的所有子元素的边距必须是邻接的

When an element's own margins collapse, and that element has clearance, its top margin collapses with the adjoining margins of subsequent siblings but that resulting margin does not collapse with the bottom margin of the parent block.

       当元素有间隙，它能与紧接着的元素重叠，但是不能与父节点的下边距重叠

Collapsing is based on the used value of 'padding', 'margin', and 'border' (i.e., after resolving any percentages). The collapsed margin is calculated over the used value of the various margins.

 

Margin Collapsing

我们来看一个例子：

ConHugeCo

Making the world safe for super sizes

 

这是一段简单的html代码，为这段代码配上些简单的样式：

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

我们希望的效果是h1 到它的父元素div#masthead 的上边距应该为20px,但是效果却是：

                              图 1 masthead 的样式

实际上，h1与div的上边距远没有20px，这是为什么呢？

而这些都是margin collapsing搞的怪，我们原本希望看到的样式是这样的：

                            图2 masthead 的修正样式

灰色虚线表示div的margin边界，红色虚线表示h1的margin边界，蓝色虚线表示p 的margin边界，可以发现，h1的上边距与div的重叠了，最后显示的是div的上边距，同理h1与p。

 

Uncollapsing

 

那如何使边距不重合呢，前面提到的W3C的CSS2.1 定义了几种情况，简单为元素添加边框或者间距（border or padding)就可以不使边距重叠。我们为div#masthead 添加一个小的间距:

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

                              图3 这才是我们需要的样式

 

 

IE7-/Win: Margin collapsing and hasLayout

IE的haslayout是个很纠结的东西，Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。

 

 

In IE7-/Win this type of margin collapsing (between a box and its first/last child) is badly affected by the hasLayout property of the boxes.

             在IE7-/Win 类型中，边距重叠被hasLayout 属性干扰了

•  A hasLayout outer box always prevents margins on the inner box to stick out of it. In absence of margin/padding this is wrong.

             hasLayout 外部盒阻止内部盒与它重叠，这时缺少margin/padding 是错误的

•  A hasLayout inner box inside a non hasLayout one always has its bottom margin sticking out of the outer box. In presence of margin/padding this is wrong. This can be fixed by an empty element between the closing tags of the two boxes.

non-hasLayout盒中的hasLayout内部盒，下边距总是与它的外部盒重叠，使用margin/padding 是错误的。在两个盒间加一个空元素能够修复错误

•  In the case of a hasLayout box inside a non hasLayout one with a top border or padding there may also be loss of margins. This behavior is dependent on presence/absence of white space and/or comments between the opening tags of the two boxes. The rows marked with "& comment" have a comment suitably placed in the markup to fix this loss of margins.

            在non-hasLayout盒中的hasLayout内部盒，如果外部盒有上边框或者间距，那么它的边距可能会丢失，这取决于两个盒之间是否有空白或者注释

•  In the case of a hasLayout outer box, its top padding collapses with the top margin of the inner box, this is always wrong since padding and margin should never collapse.

            在hasLayout 外部盒中，它的上间距与内部盒的上边距重叠，但这是错误的，因为边距与间距不能重叠

详细说明可参见 IE7-/Win: hasLayout and margins of nested boxes

参考资料：On having layout