塌陷问题
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。
垂直并列（少见）
/HTML部分/
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
/CSS部分/
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px; background: gray;
}
</style>
>
> 
>
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;
>
> 我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
如下图所示：
>
>
两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：**垂直之间塌陷的原则是以两盒子最大的外边距为准。**
* ####嵌套关系(常见)
> ```
/*CSS部分*/<style>.box1{ width:400px; height:400px; background: pink;
}.box2{ width:200px; height:200px; background: lightblue;
}</style>/*HTML部分*/<body>
<divclass="box1">
<divclass="box2"></div></div></body>如图示
1.png
当为子盒子添加margin-top：10px;时会发生如下情况：
1.png
子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。
作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/c0156029891d
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦