CSS外边距合并代码

当相邻的两个块级元素具有外边距时，CSS会自动将外边距合并到一个距离，称为外边距合并，合并后的距离为两个元素中的最大外边距。外边距合并是CSS的一个特性，可以对页面布局和排版产生一定的影响，因此需要在编写CSS样式时进行注意和处理。

以下是处理外边距合并的一些方式：

1.通过在两个块级元素之间插入一个空的内联元素来防止外边距合并：

<div class="box box1">我是第一个块级元素</div>
<span></span>
<div class="box box2">我是第二个块级元素</div>

.box {
  width:200px;
  height:100px;
  margin:20px 0;
  background-color: blue;
}

在上述示例中，由于第一个块级元素和第二个块级元素之间插入了一个空的内联元素，因此它们的外边距不会合并，而是分别应用于它们各自的元素上，从而实现了外边距的控制。

2.通过使用padding属性或浮动方式来防止外边距合并：

<div class="box box1">我是第一个块级元素</div>
<div class="box box2">我是第二个块级元素</div>

.box {
  width:200px;
  height:100px;
  margin:20px 0;
  background-color: blue;
}

.box1 {
  padding-bottom:1px;
}

.box2 {
  float:left;
}

在上述示例中，由于第一个块级元素添加了一个padding属性，因此可以防止与第二个块级元素之间的外边距合并，同时保持两个元素的距离。而对于第二个块级元素，通过设置float属性，使其成为一个浮动元素，也可以有效地防止与第一个块级元素之间的外边距出现合并现象。

综上所述，对于防止外边距合并现象，可以使用以上的方式来进行处理，从而保证页面布局和排版的质量。