在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合

1.父子元素没有边框，padding，产生外边距合并：###

按道理来说边框和字体上面都应该会有背景色，但是实际的效果并没有。这其实就是父子外边距合并带来的结果，因为它们的外边距融合了

html代码：

<div class="ctbox3">
<h1>123456</h1>
</div>

css代码：

.ctbox3{
background: red;
}
h1{
background: pink;
}

image.png

解决办法：

1.加上border

css代码：

.ctbox3{
background: red;
border:1px solid;
}
h1{
background: pink;
border:1px solid #fff;
}

image.png

2.加上padding

css代码：

.ctbox3{
background: red;
padding:10px;
}
h1{
background: pink;
border:1px solid #fff;
}

image.png

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;
}

image.png

解决办法：
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，但是没有达到效果，外边距还是会合并。可能是两者的外边距没有真正隔离开来，外边距还是交融的
• 此外，还有根元素不合并、兄弟元素之间有间隙不合并等等