1.什么是外边距叠加?
在css中,两个和更多盒模型的相邻外边距将形成一个外边距,这个外边距的高度等于发生叠加的外边距中较大的一个。外边距的这种组合方式称为叠加,这样组合的外边距叫做叠加外边距。只有普通文档流中的块框的垂直外边距才会发生外边距叠加,行内框,浮动框或绝对定位框之间的外边距不会叠加。
2.外边距叠加的几种基本情形
(1)相邻元素
相邻的外边距会发生叠加。但是根元素盒模型的外边距不会发生叠加
(2) 父元素与第一个/最后一个子元素
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔,或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔,那么外边距会合并。
(3) 空块元素
如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔, 那么它的上下外边距合并。3.外边距叠加的结果
两个外边距叠加,叠加外边距的值为两个外边距中较大的一个。在出现负边距的情况下,叠加后的外边距为最大正外边距与最小负外边距之和。如果没有正外边距,则叠加的结果为最小外边距和0之和。