.parent {
background-color: red;
width: 100px;
/* border: solid 5px black; */
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: green;
}<html>
<head></head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>.parent {
background-color: red;
width: 100px;
border: solid 5px black;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: green;
}<html>
<head></head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>第一个和第二个示例中代码中唯一发生变化的是应用于父 div 的边框。为什么应用边框时它只包含子元素的边距？
显然，这种行为有一个名字，叫做“margin collapsing”。
根据这篇 MDN 文章：
- 没有内容分隔父母和后代
如果没有边界， 填充、内联部分、创建的块格式上下文或间隙 将一个块的 margin-top 与一个或一个块的 margin-top 分开 更多它的后代块；或没有边框、填充、内联内容， height 或 min-height 将块的 margin-bottom 与 其一个或多个后代块的 margin-bottom，那么那些 利润崩溃。折叠的边距最终位于父级之外。
- 空块
如果没有边框、内边距、内联内容、高度、 或 min-height 将块的 margin-top 与其 margin-bottom 分开， 然后它的顶部和底部边距就会塌陷。