两个块级元素嵌套，如果里面的元素没有设置border 属性，在内层的 元素使用margin 时会把父元素节点 也会跟着移动， 故外边距塌陷问题，
解决方法 ，可以给父元素添加border ，或者给父元素 添加一个属性 overflow: hidden;的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
width: 500px;
height: 500px;
border: 1px dashed red;
/* background-color:yellowgreen; */
/* overflow: hidden; */
}
.two{
width: 300px;
height: 300px;
/* border: 1px dashed black; */
background-color: darkgoldenrod;
margin: 50px 50px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
标签：width,color,元素,塌陷,background,外边,border,css From： https://www.cnblogs.com/qutao125/p/16730109.html