首页 > 代码库 > margin塌陷现象

margin塌陷现象

如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)
解决方案: padding , border , overflow

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子模型</title>    <style>/*margin塌陷*/        .box1 {            width: 250px;            height: 250px;            background-color: red;            /*padding-top: 100px;*/  /*方法1:要减去多出的相应高宽 */            /*border: 1px solid #000000;*/  /*方法2*/            overflow: hidden;    /*方法3*/        }        .box2 {            width: 100px;            height: 50px;            background-color: blue;            margin-top: 100px;            margin-left: 75px;         }    </style></head><body>    <div class="box1">        <div class="box2"></div>    </div></body></html>        

 

margin塌陷现象