相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇的时候，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top`，则他们之间的垂直间距并不是margin-bottom加上margin-top之和，而是两者之间的较大者，这种现象被称之为相邻块元素垂直外边距的合并（或外边距塌陷）。
【示例代码】：
<style>
div {
width: 100px;
height: 100px;
}
.one {
background-color: orange;
margin-bottom: 10px;
}
.two {
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
【效果图】：
- 注意：这里上下块级元素之间的距离是
20，而不是20+10
解决办法
- 其实这是一个浏览器的Bug，日常工作中我们应该尽量避免。在开发中我们由上到下来进行页面布局，上面的布局如果涉及到外边距的话尽量使用
margin-bottom，而下面的布局就不要使用margin-top了，简单来说就是兄弟元素的垂直外边距遵循你设置我就不设置
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，这种情况也会发生。
【示例代码】：
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
margin-top: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
- 上述
father元素和son的上外边距是0
解决办法
如果想要父子元素有外边距，则使用下面的方式
- 方式1：可以为父元素定义1像素的上边框或上内边距
/* border-top: 1px solid transparent; */
padding-top: 1px;
- 方式2：可以为父元素添加
overflow:hidden（溢出隐藏）;