外边距合并:指的是 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 定位的元素,从来不存在外边距合并。