解决css盒模型塌陷的问题
盒模型塌陷出现的原因:子元素设置外间距,导致父元素连带向下。
如下:
.box{
width: 300px;
height: 300px;
background-color: #de91ff;
}
.a{
margin: 10px;
}
解决办法:(1)给当前父容器box设置上边线或全线;(2)给父元素设置内边距;(3)给父元素添加overflow。
如下:
.box{
width: 300px;
height: 300px;
background-color: #de91ff;
/* border-top: 1px solid red;
box-sizing: border-box;(第一种办法)*/
/*padding: 1px; (第二种办法)*/
/*overflow: hidden; (第三种办法)*/
}
.a{
margin: 10px;
}