今天無意中碰到了外邊距合並的問題，於是便研究了一下。這裏做個筆記。

　　所謂外邊距合並，指的是當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。

　　例如，這裏有這樣兩個塊元素：　

<div class="box1"></div>
<div class="box2"></div>

　　這裏給的樣式是：　

.box1{
    width:150px;
    height:150px;
    background:gray;
    }
.box2{
    width
 
:150px;
    height:150px;
    background:lightblue;
}

　　先來看一下效果：

　　意料之中的，然後給.box1一個向下的外邊距20px，結果為：

　　也沒啥問題，好了，那麽我再給.box2一個向上的外邊距10px，這裏問題就來了。

　　會發現，這兩個元素間的間距並沒有發生變化，為什麽會這樣呢？這是因為他們發生了外邊距合並，因為第一個塊元素的外邊距大於第二個塊元素的外邊距，二者間的邊距便以第一個塊元素的外邊距為準。

　　這裏我再代碼稍微改一下，變成這樣。　　

<div class="box1">
 

    <div class="box2"></div>
</div>

　　樣式變為這樣。　

.box1{
    width:150px;
    height:150px;
    background:lightblue;
    margin-top:20px;
}
.box2{
    width:100px;
    height:100px;
    background-color: lightgreen;
}

　　此時效果相信大家都知道了，可是如果我想讓.box2距離的的父元素有一定的上邊距該怎麽辦呢？也許有人會說很簡單，我直接給它一個上外邊距（margin-top）啊，不好意思，不行，那有人會說那我給它一個上內填充（padding-top）呢？不好意思，還是不行，這麽做只會改變該元素的高度，那麽應該怎麽做呢，其實很簡單，就是給它的父元素一個上內填充（padding-top）就行了，當然這裏它的父元素的總高度會改變，此時你就要根據具體情況來設置它的height了，具體情況具體分析。

　　總結：

　　1、當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。

　　2、只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合並。

　　3、當一個塊元素中嵌套另一個塊元素，而想讓子塊元素距離它的父元素有一定的上邊距時，可以給它的父元素一個上內填充（padding-top）便可解決。

CSS外邊距合並問題