Live
<body> <h1>盒子塌陷的演示,这时子盒子本来要是移动50px的,但是并没有移动</h1> <div class="father"> <div class="son"></div> </div></body>
Live
x
.father { width: 200px; height: 200px; background-color: black; /* 解决方法1: 给父元素定义上边框*/ /*border-top: 1px solid transparent;*/ /* 解决方法2:指定一个上内边距*/ /*padding: 1px;*/ /* 解决方法三:为父元素添加 overflow*//* overflow: hidden; */}.son { width: 100px; height: 100px; background-color: burlywood; /* 问题:想让子盒子下移50px,就造成了塌陷的问题*/ margin-top: 50px;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.