問題描述：

在頁面布局的時候，本來想在子元素上設置margin-top，使得子元素和父元素隔開一定的距離，想象中的效果如下圖1；結果卻不盡如人意，如圖2，margin像是加在了父元素上。

使用的代碼如下：

HTML

<div class="big">
      <div class="small">
      </div>
</div>

CSS

 *{
     padding:0px;
     margin: 0px;
 }
.big{
     width: 200px;
     height: 200px;
     background-color:red;
 }
.small{
     width: 100px;
     height: 100px;
     background-color: blue;
     margin-top: 10px;
 }

分析原因：

這是因為父元素和子元素的margin發生了和并，父元素的margin是0px，子元素的margin是10px，所以合并后的margin是10px，且加在了父元素上，于是出現了圖2的效果。在CSS2.1中對盒模型有如下規定：在垂直方向上，所有毗鄰的兩個或多個盒元素的margin將會合并。毗鄰的意思是：同級或嵌套的盒元素，并且它們之間沒有非空內容、padding或border。

合并后的margin的大小取兩個發生合并的元素中margin較大的那一個。

更詳細的講，分為幾種情況：

1.兩個元素為同級元素，即當一個元素出現在另一個元素上面時，第一個元素的margin-bottom與第二個元素的margin-top發生合并，合并后的margin值是margin-bottom和margin-top中較大的那一個

2.當兩個元素嵌套，即一個元素包含在另一個元素中時（假設沒有padding或border把兩個元素的margin分隔開），它們的margin-bottom和/或margin-top也會發生合并，合并后的margin值同樣也是margin-bottom和margin-top中較大的那一個；該問題就屬于這一種情況。

3.假設有一個空元素，且不設置它的寬高，它有margin-bottom和margin-top，但是沒有padding或border。在這種情況下，margin-bottom和margin-top就碰到了一起，它們也會發生合并，合并后的margin值同樣也是margin-bottom和margin-top中較大的那一個。
如果這個外邊距遇到另一個元素的外邊距，它還會發生合并。

解決方法：

1.在父元素上設置overflow：hidden； （觸發父元素的BFC）

2.給父元素設置padding或border（隔開兩個元素的margin）

3.父元素或子元素使用浮動或者絕對定位（浮動或絕對定位不參與margin的折疊）