在 CSS 设计中，外边距是一个至关重要的属性。然而，当两个元素相遇时，外边距的工作方式可能会让你感到惊讶。这种情况被称为“外边距合并”，这篇文章将介绍其发生的原因和如何避免它。

在 CSS 中，每个元素都有一个外边距属性。这个属性规定了元素周围的空间，可以为其设计边界，使其与其他元素保持距离。外边距实际上是一个块级元素与其周围其他元素之间的空间间隔。但如果相邻元素具有相同的外边距，且他们是块级元素，则他们之间的边距会“合并”，就像它们是一个元素一样。

div {margin: 20px;}

在上面的代码中，div 元素有一个外边距为 20 像素。如果你有两个 div 元素相邻，则它们的外边距会合并。这会导致两个元素之间的间隔只有 20 像素，而不是 40 像素。

为了避免外边距合并，可以使用float或inline-block等属性，将相邻元素放在不同的行内。

div {margin: 20px;display: inline-block;}

如上代码所示，通过使用display: inline-block，相邻元素可以避免外边距合并。还可以使用包含元素（比如div），使相邻元素位于不同的包含元素中，也可以避免外边距合并。

总的来说，外边距合并是 CSS 中常见的问题，但只需要遵循一些简单的规则，就可以避免这些问题的发生。希望这篇文章可以帮助大家更好地理解 CSS 外边距的用法。