当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。
①垂直并列
首先设置两个DIV,并为其制定宽高
-
1 /*HTML部分*/ 2 <body> 3 <div class="Box1">Box1</div> 4 <div class="Box2">Box2</div> 5 </body> 6 /*CSS部分*/ 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .Box1{ 13 width: 200px; 14 height: 200px; 15 background: yellowgreen; 16 } 17 .Box2{ 18 width: 200px; 19 height: 200px; background: gray; 20 } 21 </style>
对Box2我们为其设置margin-top: 40px;
我们肯定会很理所当然的认定这两个盒子之间的距离为90px,事实上并非如此.
如下图所示:
②嵌套关系(父级元素塌陷)
如图示
当为子盒子添加margin-top:10px;时会发生如下情况:
子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙(即父级盒子往下塌陷了10px)。
解决方法:
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素
.son:before{ content:""; overflow:hidden; }
作者:小奔的早晨
来源:简书
原文地址:https://www.cnblogs.com/syp172654682/p/7671830.html