margin边距合并问题
问题重述
margin是外边距属性，它的定义是边框和边框之间的距离，但是有些时候这些边距是合并的，你知道这是怎么回事吗？
代码演示
1.垂直边距合并
css
.box1{
width: 100px;
height: 100px;
margin-bottom: 25px;
background-color: #00FFFF;
}
.box2{
width: 100px;
height: 100px;
margin-top: 30px;
background-color: #7CFC00;
}
html
<div class="box1"></div>
<div class="box2"></div>
显示效果：
我们发现这两个色块之间的间距好像有点小，我这里对蓝色色块设置了下边距25px，对绿色色块设置了上边距30px。可是我们却发现最终的距离却是30px这是怎么回事呢？
这就是边距的合并，在垂直方向上的边距会发生合并，合并的规则是取距离的最大值，30>25所以合并的结果是取绿色色块的上边距30为最终的边距
2.父子元素，边距冒泡
css
.father{
width: 200px;
height: 200px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 50px;
}
html
<div class="father">
<div class="child"></div>
</div>
效果：
我们发现他们整体相对于上面产生了一个边距，和我们的预期是不一样的，我们仅仅是想子元素相对于父元素产生一个边距而已
外边距合并一共就这两种情况了，那么接下来我们就研究如何解决这个问题
问题的解决
1.垂直边距合并
我们重新看下这种情况的代码
css
.box1{
width: 100px;
height: 100px;
margin-bottom: 25px;
background-color: #00FFFF;
}
.box2{
width: 100px;
height: 100px;
margin-top: 30px;
background-color: #7CFC00;
}
html
<div class="box1"></div>
<div class="box2"></div>
问题产生的原因是，垂直外边距会发生合并，而且会取得最大值作为最终的外边距
解决方案:
1.使用padding来代替margin
2.使用绝对定位和相对定位
使用padding代替
.box1{
width: 100px;
height: 100px;
padding-bottom: 25px;
background-color: #00FFFF;
}
.box2{
width: 100px;
height: 100px;
padding-top: 30px;
background-color: #7CFC00;
}
注意：使用padding会造成背景颜色/图片位置的拉伸，不过它的确可以解决内容区间隔的问题
使用定位**
.box1{
position:relative;
width: 100px;
height: 100px;
margin-bottom: 25px;
background-color: #00FFFF;
}
.box2{
position:absolute;
width: 100px;
height: 100px;
margin-top: 30px;
background-color: #7CFC00;
}
实现效果：
2.父子元素，边距冒泡
我们回顾下这段代码
css
.father{
width: 200px;
height: 200px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 50px;
}
html
<div class="father">
<div class="child"></div>
</div>
产生冒泡的原因是，当父元素没有设置边框时候，css会认为子元素的边框和父元素的边框是一个边框.
margin的定义是设置边框与边框之间的距离，所以你对子元素设置margin，而且css认为没有设置边框的父元素和子元素是共用一个上顶边框的
所以就会使得整个外边距加在父元素和子元素共同的上边框上，与上顶形成一段距离
我们知道原因了，主要原因是css认为父元素和子元素共用一个上顶边框，那好我们的解决方案也就出炉了
解决方案
1.我们给父元素设置一个透明边框
.father{
width: 200px;
height: 200px;
border: 1px solid transparent;
background-color: red;
}
效果：
这就是我们期望的效果，而且这会父元素有边框了，css就不会认为父元素和子元素共用一个边框了
2.使用overflow:hidden或者浮动
使用overflow
css
.father{
width: 200px;
height: 200px;
overflow: hidden;
background-color: red;
}
.child{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 50px;
}
使用float（浮动）
.father{
width: 200px;
height: 200px;
float: left;
background-color: red;
}
效果
为什么这么做可以？
overflow:hidden（溢出）
它不仅可以解决溢出，它还能触发bfc（box format control）从而格式化父元素内的所有子元素，然后一些边距合并一些bug就被格式化掉了
float（浮动）
它也是一样会触发那个格式化
边距合并的意义
为什么CSS让垂直边距合并呢？这是CSS的bug嘛，当然不是的，最初设置CSS的时候，作者考虑到很多东西。
比如现在有一个排版，里面有一些盒子，为了增加外边距使得布局更加美观，如果没有边距合并的话会怎么样呢？
我们设置了子块margin:10，但是由于没有垂直边距合并，垂直方向的gap竟然是20，好不美观呀
于是为了解决这个排版问题，CSS的作者就增加了垂直外边距合并的概念了
这就是margin外边距合并的所有内容，分享和开源是程序员的没得，点赞和关注更是一种美德，感谢大家支持！！