margin 合并（折叠）的问题
2019-05-13 本文已影响0人
年丶轮
首先需要明确的是：
margin合并只发生在上下边距；左右的 margin 会正常显示。
下面举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
width: 100px;
height: 100px;
margin: 100px 100px;
display: inline-block;
background: #000;
}
.right{
width: 100px;
height: 100px;
margin: 100px 100px;
display: inline-block;
background: red;
}
</style>
</head>
<body>
<!-- 第一个例子，看的是边距左右和上下哪一个会重叠-->
<div class="left"></div>
<div class="right"></div>
</body>
</html>
两个块 border 之间的水平距离是200px
接下来我们把两个元素变成块级元素，看一看（只需要把 display 值改为 block 或者直接删掉 display 这个属性）
两个块 border 之间的竖直距离是100px
这个时候就是发生了 margin 的合并（折叠）。
但是如果连个块的之间的margin设置的距离不一样，浏览器会取哪一个值呢，接下来，我们将黑色块的下边距设置为200px；红色块的上边距不变依旧为100px，看看结果
两个块 border 之间的竖直距离是200px
如果两个块之间的竖直距离不一样，浏览器默认取较大值作为两者之间的距离。
