垂直外边距合并的理解与处理

垂直外边距合并是一种 CSS 样式应用规则，当相邻元素的垂直外边距 overlap 时，会产生合并效果。

垂直外边距合并有几种情况：

1. 无合并：当元素没有设置垂直外边距或外边距值不重叠时，不会发生合并。
2. 部分合并：当元素的垂直外边距部分重叠时，会合并为最大值的部分。
3. 完全合并：当元素的垂直外边距完全重叠时，会合并为最大值，并且中间空隙消失。

如需阻止垂直外边距合并，可以使用以下方法：

• 设置边框（border）： 边框会创建物理分隔，阻止外边距合并。
• 设置内边距（padding）： 内边距会增加元素的内侧间隙，阻止外边距合并。
• 创建块级格式化上下文（BFC）： BFC 是一种特殊的 CSS 环境，其中元素不会与外部元素的垂直外边距合并。可以通过设置浮动、overflow 或 display: block 等规则来创建 BFC。