1.父子元素没有边框，padding，产生外边距合并：###
按道理来说边框和字体上面都应该会有背景色，但是实际的效果并没有。这其实就是父子外边距合并带来的结果，因为它们的外边距融合了
html代码：
<div class="ctbox3">
<h1>123456</h1>
</div>
css代码：
.ctbox3{
background: red;
}
h1{
background: pink;
}
解决办法：
1.加上border
css代码：
.ctbox3{
background: red;
border:1px solid;
}
h1{
background: pink;
border:1px solid #fff;
}
2.加上padding
css代码：
.ctbox3{
background: red;
padding:10px;
}
h1{
background: pink;
border:1px solid #fff;
}
2.兄弟关系的合并###
果两个兄弟元素在正常的文档流当中，会产生外边距合并
html代码：
<div class="ctbox">
<div class="ct1">12</div>
<div class="ct2">34</div>
</div>
css代码：
.ct1{
background: red;
margin:40px;
border:1px solid;
}
.ct2{
background: pink;
margin:40px;
border:1px solid;
}
解决办法：
css代码：
.ct1{
background: red;
margin:40px;
border:1px solid;
width:100%;
}
.ct2{
background: pink;
margin:40px;
border:1px solid;
display:inline-block;
width:100%;
}
image.png
但是相应的也会出现其他因为行内块所造成的问题；
3.自身的合并###
一个元素如果里面没有东西，也没有边框和padding，那么它自身的外边距就会融合，也会发生外边距合并
不产生外边距合并的情况###
- 浮动元素和绝对定位元素的外边距不会合并
- 父子关系或者兄弟关系inline-block元素不合并
- 创建BFC与子元素不合并
设置overflow: hidden;也可以形成BFC，但是没有达到效果，外边距还是会合并。可能是两者的外边距没有真正隔离开来，外边距还是交融的 - 此外，还有根元素不合并、兄弟元素之间有间隙不合并等等
