谈到外边距塌陷（也称为外边距合并），想必大家在学习的过程中也有遇到过，那么下面就来总结一下外边距塌陷的几种情况以及解决办法吧！
一，相邻父子元素垂直外边距塌陷（合并）
首先我们编写一段代码来测试一下，给父元素设置为高200宽200，粉色背景；子元素为宽100高100，蓝色背景，并为子元素添加一个100px的上外边距。
代码如下↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: rgb(128, 202, 231);
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
可能我们想象的应该是这样的效果，子元素在父元素里垂直向下移动100px：
但实际效果确是这个样子滴！
why?这就是我们要谈到的外边距塌陷问题了，父子外边距合并，作用在了父元素身上，于是乎就出现了这种现象，还要注意的一点就是同时给父元素和子元素设置上外边距时，外边距合并，会取两则较大值，作用在父元素身上，父元素和子元素一并向下移动。
那么如何解决外边距塌陷（合并）问题呢？解决方案如下↓
-
给父元素加border
-
给父元素加padding
-
给父元素设置overflow:hidden;成独立渲染区域
-
给父元素设置浮动
-
给父元素设置绝对定位
二，相邻兄弟元素垂直外边距塌陷（合并）
编写一段代码来测试一下，给上面兄弟元素设置为高100宽100，红色背景，下外边距50px；下面兄弟元素为宽100高100，蓝色背景，上外边距100px。
代码如下↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
我们想象的可能是这个样子，兄弟元素间间距为50+100=150px:
但是实际运行结果：
why?同上，外边距塌陷（合并），兄弟元素共用一个外边距，且取较大值。那么我们该如何解决？继续往下看噻~
解决方案：
-
给任意一个兄弟元素添加一个父元素，并为其父元素设置overflow:hidden;
html代码：css代码：
总结完毕！ Are you懂了吗？
本文地址：https://blog.csdn.net/qq_45587146/article/details/109563159
