1,什么事margin塌陷问题?
第一个字元素上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上
2,如何解决?
方案1:给父元素设置不为0的padding
方案2:给父元素设置宽度不为0的border
方案3:给父元素设置CSS样式overflow:hidden
3,代码演示
<style>
.outer{
width: 400px;
background-color: gray;
/* 解决方法1 */
/* border: 1px solid yellow; */
/* 解决方法2 */
/* padding: 1px; */
/* 解决方法3 */
overflow: hidden;
}
.inner1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.inner2{
width: 100px;
height: 100px;
background-color:orange;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<div>hah</div>
</body>
3,运行结果