今天无意中碰到了外边距合并的问题,于是便研究了一下。这里做个笔记。
所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
例如,这里有这样两个块元素:
<div class="box1"></div><div class="box2"></div>
这里给的样式是:
.box1{ width:150px; height:150px; background:gray; }.box2{ width:150px; height:150px; background:lightblue; }
先来看一下效果:
意料之中的,然后给.box1一个向下的外边距20px,结果为: