网页制作之css盒模型外边距合并

一、外边距合并/Margin（空白边）叠加 概念：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

二、外边距合并常见的情况

1) 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。

两个元素同时设置了margin，上边元素设置margin-bottom：20px;下边元素设置margin-top:20px;最后的margin值依然为20px，假如一个是30px.一个是20px,则最后以大的为准。

2) 当一个元素包含在另一个元素中时（假设没有填充或者边框将空白边分隔开），它们的顶和/或者底空白边也发生叠加。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或者绝对定位之间的外边距不会合并。