垂直外边距合并是 CSS 中的一个现象，当两个垂直排列的块级元素的外边距重叠时，它们的外边距会合并成一个新的外边距，其值为两个元素中较大的外边距值。以下是垂直外边距合并的一些规则和如何阻止合并的方法：

垂直外边距合并规则：

无合并

如果元素没有设置垂直外边距或外边距值不重叠，则不会发生合并。

部分合并

当元素的垂直外边距部分重叠时，会合并为最大值的部分。

完全合并

当元素的垂直外边距完全重叠时，会合并为最大值，并且中间空隙消失。

阻止垂直外边距合并的方法：

设置边框（border）

边框会创建物理分隔，阻止外边距合并。

设置内边距（padding）

内边距会增加元素的内侧间隙，阻止外边距合并。

创建块级格式化上下文（BFC）

BFC 是一种特殊的 CSS 环境，其中元素不会与外部元素的垂直外边距合并。可以通过设置浮动、`overflow` 或 `display: block` 等规则来创建 BFC。

示例代码：

```css

div {

float: left；

width: 100px；

height: 100px；

border: 1px solid black；

margin-bottom: 20px；

}

在 HTML 中，垂直外边距合并通常发生在块级元素之间，例如 `` 元素。如果需要阻止合并，可以采用上述方法之一。