在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并（margin collapsing）是指在某些情况下，两个或多个相邻的元素的外边距会发生合并。这种情况通常发生在元素垂直排列时。例如，假如两个相邻的元素都有垂直外边距，它们的外边距会合并成一个较大的外边距。

要合并外边距，只需在相邻的元素上设置垂直外边距即可。如果要避免相邻元素的外边距合并，可以在其中一个元素上设置一个负外边距。例如：

.element1 {
  margin-bottom: 20px;
}

.element2 {
  margin-top: -20px;
}

在这个例子中，.element1 和 .element2 是相邻的元素，它们的外边距不会合并。这是因为 .element2 的上外边距为负值，所以它会抵消 .element1 的下外边距。