<style>
.box{
width: 400px;
height: 400px;
background: gold;
}
.box1{
height: 100px;
width: 100px;
background: palegreen;
margin-top:50px;
}
.box2{
height: 100px;
width: 100px;
background: palevioletred;
}
.box:before{
display: table;
content: "";
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<!--
1. 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
如上：box1如果设置外边距，与父元素box1发生重叠，box和box1同时margin-top：50px
如果给box2 设置margin-top:50px,则不会影响父元素，直接box2向下移动50px
2. 使用一个空的 table 标签可以隔离相邻的两个父子元素，阻止外边距的重叠
为防止子元素box1和父元素box相邻，可以在box1之前添加一个伪元素 table
-->
</body>
原文：https://www.cnblogs.com/qtbb/p/11433521.html