盒模型塌陷

解决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;
    }

 

 

---