今天無意中碰到了外邊距合并的問題,于是便研究了一下。這里做個筆記。
所謂外邊距合并,指的是當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
例如,這里有這樣兩個塊元素:
<div class="box1"></div><div class="box2"></div>
這里給的樣式是:
.box1{ width:150px; height:150px; background:gray; }.box2{ width:150px; height:150px; background:lightblue; }
先來看一下效果:
意料之中的,然后給.box1一個向下的外邊距20px,結(jié)果為: