版权声明：本文为博主原创文章，喜欢的话，可以通知我后进行转载哦！ https://blog.csdn.net/maidu_xbd/article/details/89851706
CSS外边距合并
两个垂直方向的外边距相遇的时候，会发生合并形成一个外边距。
合并后的外边距的高度是两者中外边距高度较大的那个值。
外边距合并的两种常见情况：
1.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
2.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#parent {
width: 200px;
height: 200px;
background: #ccc;
margin-top: 10px;
}
#child {
width: 100px;
height: 100px;
background: #4da4a2;
margin-top: 20px;
}
#div1 {
width: 100px;
height: 100px;
background: blue;
margin-bottom: 20px;
}
#div2 {
width: 100px;
height: 100px;
background: red;
margin-top: 10px;
}
</style>
</head>
<body>
<p>1.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并</p>
<div id="parent">
<div id="child"></div>
</div>
<p>2.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并</p>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
第一种父与子元素外边距合并解决方法：
1.给父元素添加overflow:hidden，会触发BFC
2.给父元素添加边框border: 1px solid transparent
3. 给父元素或者子元素添加浮动或者定位absolute