外边距合并：指的是 block 元素的上边距或下边距，优势会合并成一个边距，且合并后的边距大小与合并前最大的边距大小一致。
外边距合并，一般发生于以下三种情况：
-
相邻兄弟节点之间
相邻兄弟节点之间上下边距会发生合并，除非后一个节点clear past flosts。 -
父子节点之间
如果父元素没有 border、padding、inline content、clearance 属性与第一个子节点的 margin-top 相隔离；或者，父元素没有 border、padding、inline content、height、min-height、max-height 与最后一个子节点的 margin-bottom 相隔离。以上两种情况会导致子元素边界溢出父元素边界。
-
空 block 元素
如果一个空元素，没有 border、padding、inline content、height、min-height 来区分该元素的 margin-top 和margin-bottom ，它的上边距和下边距之间会发生合并。
tips:
- 以上规则对 margin 为 0 的元素同样适用；
- 以上规则同样适用于外边距为负的元素，合并后的边距为负边距相加之和。
- float 元素和 absolute 定位的元素，从来不存在外边距合并。
网友评论