我们先定义两个盒子，两个盒子的外边距都相等。然后你会发现这两个盒子的外边距重合了
重叠的边距为边距更大的单方边距。相等则为单个边距。
哪些情况会发生外边距重叠？
外边距的重叠只产生在普通流文档的上下外边距之间，而 水平方向（左右）不会发生合并。 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题
一：相邻兄弟元素的margin-bottom 和margin-top 的值重叠
.box1{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</body>
二：父级元素和子元素的marign重叠
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
position: relative;
}
.box2{
width: 50px;
height: 50px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1"><div class="box2">盒子二</div></div>
</body>
外边距合并的解决办法
虽然外边距合并通常是不可避免的，但有时你可能希望避免这种现象。可以使用以下几种方法来解决或避免外边距合并：
- 使用
overflow属性
通过给父元素设置 overflow 属性（例如 overflow: hidden; 或 overflow: auto;），可以阻止外边距合并。这个方法只适用于 “子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top<parentHeight)” ，不然子元素部分内容就会被隐藏掉
<div style="overflow: hidden;">
<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>
</div>
设置 overflow: hidden; 会使父元素的外边距和子元素的外边距不再合并，两个外边距将相加。
- 使用内边距（
padding）
如果你想要避免外边距合并，可以通过给元素添加内边距来实现。
]<div style="padding-top: 1px;">
<div style="margin-top: 30px;"></div>
</div>
这可以避免父元素的外边距与子元素的外边距合并。
- 使用边框（
border）类似于内边距，边框也可以防止外边距合并。
<div style="border-top: 1px solid transparent;">
<div style="margin-top: 30px;"></div>
</div>
添加透明的边框会阻止外边距合并。
- 使用
display: flex或display: grid
如果你使用 flexbox 或 grid 布局，外边距合并不会发生。这样可以避免传统布局中的外边距合并问题。
<div style="display: flex;">
<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>
</div>
