1. 层叠外边距
当相邻的两个元素都设置了外边距时，它们的外边距会发生重叠（也称为合并）。
代码示例
在下面的代码中，当一个元素具有一个外边距为10px时，它会与其相邻元素的外边距发生重叠：
p{
margin: 10px 0;
}
div{
margin: 20px 0;
}
尝试改变元素的外边距值可以改变它们之间的间距。
浏览器实现对于margin重叠有不同的原理，比如Safari等浏览器对margin-left和margin-right重叠但不对margin-top和margin-bottom重叠。
为了避免外边距重叠，可以使用下面的技术。
2. 嵌套元素
如果把元素B放在元素A中，元素A和B就不是相邻的元素了，它们之间的外边距就不会重叠了。
下面的代码中，第二个段落被放在第一个段落内部：
p{
margin: 10px 0;
}
HTML代码
这是第一个段落。
这是第二个段落。
如果浏览器支持HTML5，则这个HTML代码将是不合法的。对于这种情况，建议在HTML5中使用标准的<div>元素来替代不合法的<p>标签嵌套。
3. 伪元素
使用CSS伪元素也可以有效地避免外边距重叠。通过为元素添加空的content属性，将元素分开。
下面的代码中，第二个段落的前面用一个空白的<span>标签分隔开来：
p{
margin: 10px 0;
}
span::before{
content: "";
display: table;
}
HTML代码
这是第一个段落。
<span></span>
这是第二个段落。
4. 清除浮动
在容器元素中浮动的子元素不会使容器元素的外边距重叠，但浮动并不总是适用于所有Web页面。
下面的代码中，添加了clear：both属性，清除了所有浮动的元素：
.clearfix::after{
content: "";
display: table;
clear: both;
}
HTML代码
<div class="clearfix">
<div style="float: left;">这是一个浮动的元素。</div>
<div style="float: left;">这是另一个浮动的元素。</div>
</div>
总结
本文介绍了防止CSS外边距重叠的几种方法，包括层叠外边距和嵌套元素方法、使用伪元素、清除浮动等方法。对于Web页面设计过程中的margin重叠问题，可以根据所需要的效果选择相应的方法进行解决。（此行不计入字数）