开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情
在 CSS 中，margin 用来设置或者清除周围的（外边框）元素区域。
什么是 margin 塌陷
margin 塌陷问题是 css 中常见的一种情况，我们先来看一段代码：
<!DOCTYPE html>
<html>
<head>
<style>
#box1{
background: yellow;
width:200px;
height:200px;
margin:100px 0 0 100px;
}
#box2{
background: #2bc22b;
width:100px;
height:100px;
margin-left:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">box2
</body>
</html>
运行到浏览器的效果如下：
很明显这与我们的预期有所偏差，实际上想要的效果是这样的：
上面的代码效果实际上就是产生了 margin 塌陷（边界重叠）。
外边距的塌陷是在标准流中，指的是竖直方向的 margin 发生塌陷现象（水平方向不会产生塌陷）
塌陷可以分为两种情况,一般父子元素之间的塌陷比较常见：
-
情况一：两个元素同级，垂直排列，那么上面的 div 的下边距（margin-bottom）和下面 div 的上边距（margin-top）会产生塌陷，间距会重叠，最终的距离会以大的边距来计算。
解决方法：两个外边距不同时出现在样式中。
-
情况二：两个元素是父子元素，内部的元素设置 margin-top，它的父级元素也会受到影响，同时产生上边距，此时父子元素会发生粘连。
margin 塌陷解决方案：
1、父容器设置 border（不需要边框样式的话可以设置成透明）
#box1 {
border: 1px solid transparent;
}
2、在父容器的之前添加一个空元素（利用伪元素 ::before）
#box1::before {
content:'';
display:table;
}
3、父容器设置 overflow：hidden
4、父容器设置 padding
5、父容器设置 position：fixed
6、父容器设置 display：table
另外，Html 中的一些元素会有默认的 margin ，可以通过通配符选择器设置 margin、padding 来消除其影响
* {
margin: 0;
padding: 0;
}
