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

使用定位

.father{
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;
}
.child{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	margin-top: 50px;
}

效果

为什么这么做可以？

overflow:hidden（溢出）
它不仅可以解决溢出，它还能触发bfc（box format control）从而格式化父元素内的所有子元素，然后一些边距合并一些bug就被格式化掉了
float（浮动）
它也是一样会触发那个格式化
定位（也会触发格式化）

因此： 浮动、定位、溢出是bfc三剑客

边距合并的意义

为什么CSS让垂直边距合并呢？这是CSS的bug嘛，当然不是的，最初设置CSS的时候，作者考虑到很多东西。

比如现在有一个排版，里面有一些盒子，为了增加外边距使得布局更加美观，如果没有边距合并的话会怎么样呢？

我们设置了子块margin:10，但是由于没有垂直边距合并，垂直方向的gap竟然是20，好不美观呀

于是为了解决这个排版问题，CSS的作者就增加了垂直外边距合并的概念了

这就是margin外边距合并的所有内容，分享和开源是程序员的没得，点赞和关注更是一种美德，感谢大家支持！！