CSS中的外边距重叠及其结果

外边距重叠（Margin Collapsing）是CSS布局中的一个常见现象。简单来说，当两个垂直相邻的块级元素的垂直外边距相遇时，它们会合并成一个外边距，大小为两者中的较大者。

解决方案：

1. 使用内边距（padding）代替外边距：如果不希望发生外边距重叠，可以使用内边距来代替外边距。
2. 使用边框（border）：给元素添加边框可以阻止外边距合并。
3. 使用透明边框：如果不希望改变元素的边框样式，可以使用border: 1px solid transparent;来避免边框样式改变。
4. 使用浮动（float）或定位（position: absolute/fixed）：浮动和定位的元素不会发生外边距重叠。
5. 使用透明边框或额外元素：在两个元素之间添加一个透明边框或者一个高度为0的额外元素，可以防止外边距合并。

示例代码：

/* 使用内边距来避免外边距重叠 */
.element1 {
  padding: 10px;
  /* 其他样式 */
}
 
/* 使用边框来避免外边距重叠 */
.element2 {
  border: 1px solid #transparent;
  /* 其他样式 */
}
 
/* 使用透明边框来避免外边距重叠 */
.element3 {
  border: 1px solid transparent;
  /* 其他样式 */
}
 
/* 使用浮动来避免外边距重叠 */
.element4 {
  float: left;
  /* 其他样式 */
}
 
/* 使用额外元素来避免外边距重叠 */
.element5 {
  height: 0;
  clear: both;
  /* 其他样式 */
}