首页 > 代码库 > margin-塌陷问题
margin-塌陷问题
塌陷问题
当两个盒子在垂直方向上设置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>
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;
1 <style> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 .box1{ 7 width:200px; 8 height:200px; 9 background: yellowgreen;10 margin-bottom: 50px;11 }12 .box2{13 width:200px;14 height:200px;15 background: gray;16 margin-top: 40px;17 }18 </style>
我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
如下图所示：
两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。
②嵌套关系(常见)
1 /*CSS部分*/ 2 <style> 3 .box1{ 4 width:400px; 5 height:400px; 6 background: pink; 7 } 8 .box2{ 9 width:200px;10 height:200px;11 background: lightblue;12 }13 </style>14 /*HTML部分*/15 <body>16 <divclass="box1">17 <divclass="box2"></div>18 </div>19 </body>
如图示
当为子盒子添加margin-top：10px;时会发生如下情况：
子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。
来自为知笔记(Wiz)
margin-塌陷问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。