一：什么是margin塌陷 ？
在标准文档流中，竖直方向（左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin值，这就是margin的塌陷现象。
二：margin塌陷分类 ？
（1）兄弟盒子之间的塌陷问题。
（2）父子盒子之间的塌陷问题。
三：详细分析
（1）兄弟盒子之间的塌陷问题
比如下面两个盒子模型排列：
<body>
<div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line- height:100px;">层1</div>
<div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center; line-height:100px;">层2</div>
</body>
本来我们以为上面的盒子设置了margin-bottom的值，下面的盒子模型中设置了margin-top值，两者之间的距离应该是（30px+20px=50px）,但是结果两都之间的距离是30px如下面
最低0.47元/天 解锁文章
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
