CSS: margin—相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的塌陷

垂直外边距(margin)的合并是CSS布局中的一个常见问题。当两个垂直相邻的块级元素之间的外边距遇到时，它们之间的距离不是两者相加，而是取两者之中的较大者。这一规则被称为外边距合并（也称为margin collapsing）。

解决方案：

1. 使用内边距(padding)代替外边距：尽量使用内边距来控制元素之间的距离，而不是外边距。
2. 使用边框(border)：给元素添加边框可以分隔相邻元素的外边距。
3. 使用透明边框：如果不希望增加元素的实际边框，可以使用border-style: none和border-color: transparent的方式来避免可视边框的影响。
4. 使用浮动(float)：对于想要避免外边距合并的元素，可以使用float属性来“浮出”正常的文档流，这样它们就不会相互影响了。
5. 使用绝对定位(position: absolute)：同样，绝对定位的元素也不会影响到其他元素的外边距。
6. 使用创建BFC(Block Formatting Context)：通过一些特定的CSS属性可以创建块级格式化上下文，使得内部元素的布局不会影响到外部元素的布局。

示例代码：

/* 使用内边距来代替外边距 */
.element1 {
  padding-bottom: 10px;
  /* 其他样式 */
}
 
.element2 {
  padding-top: 10px;
  /* 其他样式 */
}
 
/* 使用透明边框 */
.element1 {
  border-bottom-style: solid;
  border-bottom-color: transparent;
  /* 其他样式 */
}
 
/* 使用float来“浮出”正常的文档流 */
.element1 {
  float: left;
  /* 其他样式 */
}
 
.element2 {
  float: left;
  /* 其他样式 */
}
 
/* 创建BFC */
.element1 {
  overflow: hidden;
  /* 其他样式 */
}

在实际应用中，根据具体情况选择合适的方法来处理垂直外边距合并问题。