垂直外边距重叠

重叠现象

边距重叠（Margin Collapse）是CSS中一种常见的现象，当两个（或多个）相邻元素的上下外边距相遇时，它们会合并成一个外边距，而不是简单地被累加。

边距重叠可能发生在以下情况下：

垂直相邻元素：
- 当两个垂直相邻的元素没有边框、内边距、浮动或者内联块隔开时，它们的上下外边距会合并成一个外边距。
- 这意味着，如果一个元素的底部外边距与下一个元素的顶部外边距相遇，则这两个外边距会合并成一个外边距。
父子元素边距重叠：
- 父元素的上边距和第一个子元素的上边距、父元素的下边距和最后一个子元素的下边距也会发生合并。
- 这种情况下，子元素的上边距和下边距会与父元素的边距相结合，而不是简单地添加到父元素的上下边界上。

合并值取两个边距的最大值，比如10px和20px会被合并成20px

边距重叠可能会影响到元素的布局和排版，导致页面显示不如预期。解决方法包括：

避免重叠：添加padding（不能是0）、边框（不能是0）、浮动或者使用内联块（display: inline-block;）

清除浮动：overflow: hidden或其他非visible的overflow值（如auto或scroll）

padding：使用padding代替margin来达到相同的效果

BFC：