摘要：我們可以注意定義中的幾個(gè)關(guān)鍵字毗鄰兩個(gè)或多個(gè)垂直方向和普通流。如何避免外邊距疊加上面講了外邊距的疊加，那如何避免呢，其實(shí)只要破壞上面講到的四個(gè)條件中的任何一個(gè)即可毗鄰兩個(gè)或多個(gè)普通流和垂直方向。

外邊距疊加一直是前端開(kāi)發(fā)必須了解的一個(gè)概念，面試一般也會(huì)問(wèn)到這個(gè)問(wèn)題。所以整理一下相關(guān)外邊距疊加相關(guān)的知識(shí)點(diǎn)。外邊距疊加是什么？什么時(shí)候會(huì)發(fā)生外邊距疊加？如何避免外邊距疊加？

先來(lái)看看 W3C 對(duì)于外邊距疊加的定義：

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.

大概意思是：在CSS中，兩個(gè)或多個(gè)毗鄰的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會(huì)發(fā)生疊加，這種形成的外邊距稱之為外邊距疊加。

我們可以注意定義中的幾個(gè)關(guān)鍵字：毗鄰、兩個(gè)或多個(gè)、垂直方向和普通流。

毗鄰說(shuō)明了他們的位置關(guān)系，沒(méi)有被 padding、border、clear 和 line box 分隔開(kāi)。

兩個(gè)或多個(gè)盒子是指元素之間的相互影響，單個(gè)元素不會(huì)存在外邊距疊加的情況。

Horizontal margins never collapse.

只有垂直方向的外邊距會(huì)發(fā)生外邊距疊加。水平方向的外邊距不存在疊加的情況。

啥為普通流？W3C 只對(duì) out of flow 作了定義：

An element is called out of flow if it is floated, absolutely positioned, or is the root element.An element is called in-flow if it is not out-of-flow.

從定義中我們可以知道只要不是 float、absolutely positioned 和 root element 時(shí)就是 in flow。

外邊距疊加存在兩種情況：一是父子外邊距疊加；二是兄弟外邊距疊加。

W3C 對(duì)于什么是毗鄰的外邊距也有定義：

Two margins are adjoining if and only if: - both belong to in-flow block-level boxes that participate in the same block formatting context - no line boxes, no clearance, no padding and no border separate them - 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

從定義中我們可以很清楚的知道要符合哪些情況才會(huì)發(fā)生外邊距折疊：

都屬于普通流的塊級(jí)盒子且參與到相同的塊級(jí)格式上下文中

沒(méi)有被padding、border、clear和line box分隔開(kāi)

都屬于垂直毗鄰盒子邊緣：

盒子的top margin和它第一個(gè)普通流子元素的top margin

盒子的bottom margin和它下一個(gè)普通流兄弟的top margin

盒子的bottom margin和它父元素的bottom margin

盒子的top margin和bottom margin，且沒(méi)有創(chuàng)建一個(gè)新的塊級(jí)格式上下文，且有被計(jì)算為0的min-height，被計(jì)算為0或auto的height，且沒(méi)有普通流子元素

.parent1 {
    height: 20px;
    background: yellow;
    margin-bottom: 20px;
}
.parent2 {
    margin: 20px 0 30px;
}
.parent3 {
    height: 20px;
    background: green;
    margin-top: 20px;
}
.child {
    background: red;
    height: 20px;
    margin: 40px 0 30px;
}

  
  
    

    

    

  
  

這個(gè) demo 里的 .parent2 和第一個(gè) .child 的 top margin 疊加，導(dǎo)致 .parent1 和 .parent2 之間的邊距為 40px。

還是用上面的代碼，.parent2 中的 .child 中的 top margin 和 bottom margin 發(fā)生外邊距疊加，它們之間的外邊距為 40px。

還是上面的代碼，.parent2 中的最后一個(gè) .child 發(fā)生 bottom margin 疊加，.parent2
和 .parent3 之間的邊距為 30px。

.demo {
    height: 30px;
    background: red;
}
.margin-test {
    margin: 20px 0 30px;
}

  
    

    

    

  

這個(gè) demo 是上面的第四種情況，元素自身的外邊距 top 和 bottom 發(fā)生折疊，我們可以看出 .container 的高度為 90px，這里可以看到 margin-test 的 top 和 bottom 外邊距發(fā)生了折疊。

上面講了外邊距的疊加，那如何避免呢，其實(shí)只要破壞上面講到的四個(gè)條件中的任何一個(gè)即可：毗鄰、兩個(gè)或多個(gè)、普通流和垂直方向。

W3C也對(duì)此做了總結(jié)：

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

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

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

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

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

The bottom margin of an in-flow block box with a "height" of "auto" and a "min-height" of zero collapses with its last in-flow block-level child"s bottom margin if the box has no bottom padding and no bottom border and the child"s bottom margin does not collapse with a top margin that has clearance.

A box"s own margins collapse 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) collapse.

翻譯一下：

浮動(dòng)元素不會(huì)與任何元素發(fā)生疊加，也包括它的子元素

創(chuàng)建了 BFC 的元素不會(huì)和它的子元素發(fā)生外邊距疊加

絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加，也包括它的子元素

inline-block 元素和其他任何元素之間不發(fā)生外邊距疊加，也包括它的子元素

普通流中的塊級(jí)元素的 margin-bottom 永遠(yuǎn)和它相鄰的下一個(gè)塊級(jí)元素的 margin-top 疊加，除非相鄰的兄弟元素 clear

普通流中的塊級(jí)元素（沒(méi)有 border-top、沒(méi)有 padding-top）的 margin-top 和它的第一個(gè)普通流中的子元素（沒(méi)有clear）發(fā)生 margin-top 疊加

普通流中的塊級(jí)元素（height為 auto、min-height為0、沒(méi)有 border-bottom、沒(méi)有 padding-bottom）和它的最后一個(gè)普通流中的子元素（沒(méi)有自身發(fā)生margin疊加或clear）發(fā)生 margin-bottom疊加

如果一個(gè)元素的 min-height 為0、沒(méi)有 border、沒(méi)有padding、高度為0或者auto、不包含子元素，那么它自身的外邊距會(huì)發(fā)生疊加

本文首發(fā)于有贊技術(shù)博客：http://tech.youzan.com/css-ma...