CSS外边距叠加效应

按正常理解，如果纵向相邻两个元素有设置外边距(margin)，它们之间的距离是两个上下边距之和，如下：

1 <div style="margin-bottom:20px;background-color:#ff0000;">first</div>
2 <div style="margin-top:30px;background-color:#00ff00;">second</div>

实际并非如此，详情请阅读Collapsing Margins了解更多关于外边距复杂之处，两个纵向的无定位(position:static)元素相邻的外边距(margin)会叠加成为其中一个较大的外边距的值，并非是两者的和。