之前在前端群有个汉纸聊到他面试别人时问到：margin塌陷和margin合并问题如何解决？
然后我自己也懵逼了哈哈，因为只是遇到过并不知道这叫塌陷、合并哈哈哈················那我们一起来看看怎么回事吧，加上要怎么解决哦
塌陷问题：
在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>margin塌陷(父子)</title> <style> * { margin: 0; padding: 0; } .father { width: 200px; height: 200px; background-color: red; margin-top: 100px; } .son { width: 50px; height: 50px; background-color: #eee; opacity: 0.8; margin-top: 150px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
虽然给类名为：son 的元素给了 margin-top: 150px; 但是子元素并没有相对于父元素 margin-top: 150px; ，而是和父元素一起下移了。（即父级盒子往下塌陷了10px）。
原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。
解决方案：
/* 解决方案 */ /* 给父级设置边框或内边距(不建议使用) */ /* .father { border: 1px solid #000000; } */ /* 触发bfc(块级格式上下文),改变父级的渲染规则 */ /* 改变父级的渲染规则有以下四种方法,给父级盒子添加 (1)position:absolute/fixed (2)display:inline-block; (3)float:left/right (4)overflow:hidden 这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷 */
合并问题：
块级元素的上外边距与下外边距有时会合并为单个外边距。
margin合并计算规则为正正取大值，正负值相加，负负最负值。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin塌陷</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1,
.box2 {
width: 300px;
height: 300px;
}
.box1 {
background-color: brown;
margin-bottom: 60px;
}
.box2 {
background-color:cornflowerblue;
margin-top: 70px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
上面的有：margin-bottom: 60px; 下面的有：margin-top: 70px; 按理来说那它俩之间的距离应该是130px，然而事实并非如此，它俩之间的距离是70px。
其实这个margin合并的bug你没有必要去解决，比如你现在有两个元素，你想让他俩上下130px，没有必要60px+70px吧，你只需要上面的margin-bottom为130px，就可以了！！和margin塌陷不同，margin塌陷是视觉上的效果，你加个css就能弥补。
解决方案：
/* 解决方案： */ /* 给box1或box2加上一层父级元素并加上overflow:hidden; */ /* .box2{ float: left; } */ /* .box2 { position: absolute; } */ /* .box1 { display: inline-block; } */ /* .box2 { display: inline-block; } */
HTML改为：
<body> <!-- <div style="overflow: hidden;"> <div class="box1"></div> </div> --> <div style="overflow: hidden;"> <div class="box2"></div> </div> </body>