今天無意中碰到了外邊距合并的問題,于是便研究了一下。這里做個(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),移動開發(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),移動開發(fā)培訓(xùn)

  先來看一下效果:

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

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

  iOS培訓(xùn),Swift培訓(xùn),蘋
        
		<div   id=

網(wǎng)友評論