CSS进阶--外边距叠加

外边距叠加

外边距叠加，又称“margin叠加”，指的是当两个垂直外边距相遇时，这两个外边距将会合并成一个外边距。

其中，叠加之后的外边距高度，等于发生叠加之前的两个外边距中的最大值

外边距叠加有三种情况：同级元素、父级元素、空元素

同级元素

当一个元素出现在另一个元素上面的时候，第1个元素的下边距（margin-bottom）将会与第2个元素的上边距（margin-top）发生合并。

父子元素

当一个元素包含在另外一个元素中时（呈父子关系），假如没有padding或border把外边距分隔开，父元素和子元素的相邻上下外边距也会发生合并。

空元素

空元素，指的是没有子元素或者没有文字内容的元素，当一个空元素有上下外边距时，如果没有border或padding，则元素的上外边距与下外边距就会合并。如果空元素的外边距碰到另外一个元素的外边距，它们也会发生合并。

注意：

1. 水平外边距，永远不会有叠加，水平外边距指的是margin-left和margin-right。
2. 垂直外边距只有在以上三种情况下会叠加。
3. 外边距叠加之后的外边距高度，等于发生叠加之前的两个外边距中的最大值。
4. 外边距叠加针对的是block以及inline-block元素，不包括inline元素。因为inline元素的margin-top和margin-bottom设置无效。

建议：

最好统一使用margin-top或margin-bottom，不要混合使用，从而降低出现问题的风险。