[翻译] Box model: Collapsing margins

http://www.ctba.cn/blog/entry/2363

关于 margin 折叠的问题一直很困扰（尤其是 ff 下的 margin-top 失效），一般都是 hack 过去的，没有细究，最近为面试在整理知识点，顺便翻文档，把一些犄角旮旯的残留问题来次刨根问底。英语水平实在一般，翻译不周的地方希望各位高人指正，感激不尽 ~__~ 废话不多说，开始俺的第一次：

8.3.1 Collapsing margins

有关盒模型的全部讲解在这里：http://www.w3.org/TR/CSS21/box.html

引用

In this specification, the expression collapsing margins 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.

在这个说明中，“collapsing margins”所表达的意思是：两个或以上盒模型之间（关系可以是相邻或嵌套）相邻的 margins（不含非空内容、 padding、边框区域或使用清除分离）结合表示为一个单独的 margin。

引用

In CSS 2.1, horizontal margins never collapse.

在 CSS2.I 规范中，横向的 margin 永远不会被折叠。

引用

Vertical margins may collapse between certain boxes:

垂直的 margin 可能在一些盒模型中被折叠：

引用

Two or more adjoining vertical margins of block 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 宽度是相邻 margin 的最大值。在包含负 margin 的情况下，用相邻 margin 的正值减去最小负 margin 值的绝对值。如果没有正 margin 值，则用 0 减去最小负 margin 值的绝对值。注意：相邻的盒模型可能由元素产生而并没有相邻或继承的关系。

引用

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

在一个浮动盒模型与另外任意一个盒模型之间的垂直 margin 不会被折叠（甚至一个浮动的盒模型与它的子元素间也是一样）。

引用

Vertical margins of elements with 'overflow' other than 'visible' do not collapse with their in-flow children.

除取 visible 值以外，设置了 overflow 属性的元素与它子元素间的 margin 不会被折叠。

引用

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

使用绝对定位的盒模型的垂直 margin 不会被折叠（甚至与他们的子元素间也是一样）。

引用

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

设置了 inline-block 元素的垂直 margin 不会被折叠（甚至与他们的子元素间也是一样）。

引用

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.

如果一个盒模型的上下 margin 相邻，这时它的 margin 可能折叠。在这种情况下，元素的位置取决于它相邻元素的 margin 是否被折叠。

引用

    o 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.

    o 如果元素的 margin 与它父元素的 margin-top 折叠，盒模型的顶部边框的边界定义与它的父元素相同。

引用

    o 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 top border.

    o 另外，任何元素的父元素不参与 margin 折叠，或者说只有父元素的 margin-bottom 参与计算。如果元素的顶部边框非零，那么元素的顶部边框的边界位置和原来一样。

引用

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

一个使用了清除的元素的 margin-top 绝不会和它的块级父元素的 margin-bottom 折叠。

引用

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.

根元素的 margin 不会被折叠。

引用

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.

浮动的块级元素的 margin-bottom 总是与它后面的同级浮动块级元素的 margin-top 相邻，除非那个同级元素已经使用了清除。

引用

The top margin of an in-flow block-level element 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.

如果一个浮动的块级元素没有 border-top，没有 padding-top，且子元素没有使用清除，那么它的 margin-top 与它的第一个浮动块级子元素的 margin-top 相邻。

引用

The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.

如果一个浮动的块级元素的 margin-bottom 指定了 height: auto，min-height 小于它的实际使用高度，max-height 大于它的实际使用高度，那么当这个元素没有指定 padding-bottom 或 border 时，它和它的最后一个浮动块级子元素的 margin-bottom 相邻。

引用

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，那么它所拥有的 margin 是相邻的，而且它既没有 border-top 与 border- bottom，也没有 padding-top 与 padding-bottom，它的 height 也可以是 0 或 auto，它不能包含一个 line 的盒模型，它所有浮动子元素（如果有的话）的 margin 也都是相邻的。

引用

When an element's own margins collapse, and that element has had clearance applied to it, 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.

当一个元素拥有了 margin 折叠，并且它使用了清除，那么它的 margin-top 会和紧随其后的同级元素的相邻 margin 折叠，但结果是它的 margin 将无法与其块级父元素的 margin-bottom 折叠。

引用

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.

折叠操作是以 padding、margin、border 的值为基础的（即，在解析了任意百分比之后）。折叠后的 margin 值将覆盖已使用的不同 margin 的值并以此计算。



一个简单例子在这里： http://www.w3.org/TR/CSS21/box.html#mpb-examples。有图示（上图），有兴趣的可以看看，就不翻了 *___*