概述：

注：加粗斜體字是非常重要的概念，決定着你是不是能看懂那句話，所以不懂的請一定要搜索一下。

頁面上的每個元素，都在一個矩形框里。

每個矩形框都是一個盒模型。

每個盒模型都由內容區域（content）、邊框（border ）、內填充（padding）和外邊距（margin）組成。

這四個屬性都可以獨立存在。也就是說，一個盒子可以只有content，也可以只有border，也可以只有padding，也可以只有margin。

（圖片來自網絡）

關於margin：

可以有負值

Negative values for margin properties are allowed, but there may be implementation-specific limits

這個特性的作用，強大到可以單獨寫一篇文章了。所以這里先停留在認知層面就夠了。

背景永遠都是透明的
可能會失效

margin-top and margin-bottom have no effect on non-replaced inline elements.

給一個寬度和高度不是由外部資源影響的行內級元素（例如a元素、span元素）設置margin-top和margin-bottom是沒有任何效果的。

垂直相鄰的外邊距會折疊

Adjoining vertical margins collapse, except:

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

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:

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

兩個垂直的margin在一定條件下會折疊，即兩個margin合並成一個。

合並規則是，最終的值是兩個margin中的最大值，即margin=max(margin1,margin2)。如果有一個是負值，則等於正值減去負值。如果都是負值，則用0減去兩個負值。

margin-bottom	margin-top	結果
30px	20px	30px
-30px	20px	-10px
-30px	-20px	-50px

折疊的條件其實是很嚴苛的，只要不滿足任何一條要求，都不會發生折疊。

先來看一個滿足條件的例子。

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

body {
  background-color: #63BD84;
}
.wrap {
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2{
  height: 100px;
  margin: 10px;
  background-color: #BDFFF7;
}

最終的結果是這樣的：

div1的margin-top和父元素的margin-top結合在一起了，又與body的margin-top結合在一起了，最終與html有10px的margin（因為html是根元素，他的margin不折疊）。

div1的margin-bottom和div2的margin-top結合在一起了。

div2的margin-bottom和父元素的margin-bottom結合在一起了。

可以產生這樣的效果是因為：

1.這三個盒子都是在普通流內的。如果讓div1和div2浮動起來或者絕對定位，他們的margin將不再折疊。

body {
  margin: 0; //瀏覽器的默認樣式是margin:8;
  background-color: #63BD84;
}
.container {
  width: 300px;
  background-color: #CEE6E6;
}
.wrap {
  height: 300px;
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2 {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #BDFFF7;
}

2.他們都在同一個塊級格式化上下文中，如果父元素創建了一個新的塊級格式化上下文：

body {
  margin: 0; //瀏覽器的默認樣式是margin:8;
  background-color: #63BD84;
}
.container {
  width: 300px;
  background-color: #CEE6E6;
}
.wrap {
  overflow: hidden;  //創建新的塊級格式化上下文
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2 {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #BDFFF7;
}