您的位置：首页 > 其它

经典bug——margin塌陷

2018-08-17 16:20 78 查看

margin-塌陷问题

塌陷问题

感谢原作者，转自https://www.geek-share.com/detail/2685626420.html 当两个盒子在垂直方向上设置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间隙。

改变父级的渲染规则：
使父级变成bfc《block format context》

具体弥补方法（针对不同情况，这些方法往往还有可能引发新问题故而选择性使用）：（1）为父盒子添加position:absolute。（2）为父盒子添加overflow：hidden；（3）为父盒子添加display:inline-block

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航