今天無(wú)意中碰到了外邊距合并的問(wèn)題，于是便研究了一下。這里做個(gè)筆記。

　　所謂外邊距合并，指的是當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

　　例如，這里有這樣兩個(gè)塊元素：　

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

　　這里給的樣式是：　

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

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

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

　　先來(lái)看一下效果：

　　iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

　　意料之中的，然后給.box1一個(gè)向下的外邊距20px，結(jié)果為：

　　iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

　　也沒(méi)啥問(wèn)題，好了，那么我再給.box2一個(gè)向上的外邊距10px，這里問(wèn)題就來(lái)了。

　　iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

　　會(huì)發(fā)現(xiàn)，這兩個(gè)元素間的間距并沒(méi)有發(fā)生變化，為什么會(huì)這樣呢？這是因?yàn)樗麄儼l(fā)生了外邊距合并，因?yàn)榈谝粋€(gè)塊元素的外邊距大于第二個(gè)塊元素的外邊距，二者間的邊距便以第一個(gè)塊元素的外邊距為準(zhǔn)。

　　這里我再代碼稍微改一下，變成這樣?！　?/p>

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

　　樣式變?yōu)檫@樣?！?/p>

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

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

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn)

　　此時(shí)效果相信大家都知道了，可是如果我想讓.box2距離的的父元素有一定的上邊距該怎么辦呢？也許有人會(huì)說(shuō)很簡(jiǎn)單，我直接給它一個(gè)上外邊距（margin-top）啊，不好意思，不行，那有人會(huì)說(shuō)那我給它一個(gè)上內(nèi)填充（padding-top）呢？不好意思，還是不行，這么做只會(huì)改變?cè)撛氐母叨?，那么?yīng)該怎么做呢，其實(shí)很簡(jiǎn)單，就是給它的父元素一個(gè)上內(nèi)填充（padding-top）就行了，當(dāng)然這里它的父元素的總高度會(huì)改變，此時(shí)你就要根據(jù)具體情況來(lái)設(shè)置它的height了，具體情況具體分析。

　

　　總結(jié)：

　　1、當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

　　2、只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

　　3、當(dāng)一個(gè)塊元素中嵌套另一個(gè)塊元素，而想讓子塊元素距離它的父元素有一定的上邊距時(shí)，可以給它的父元素一個(gè)上內(nèi)填充（padding-top）便可解決。

 　　

 

作者：江峰★ 
出處：http://www.cnblogs.com/jf-67/ 
本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文鏈接，否則保留追究法律責(zé)任的權(quán)利

http://www.cnblogs.com/jf-67/p/7220861.html