本文详细介绍了CSS中margin塌陷和margin合并的现象，通过实例展示了问题的具体表现。当父元素和子元素的margin-top相遇时，会采用两者中较大的值。解决margin塌陷的方法包括使父元素变为BFC元素，如使用`display:inline-block`，或添加边框。margin合并则表现为相邻元素的margin不会简单相加，只有当两者的margin值都增大到一定程度时，间距才会相应增加。解决margin合并同样可通过创建BFC来实现。
首先说一下margin塌陷
1.我们使父级的margin-top为50px时，父级便会距离上面50px。
2.当我们使子盒子的margin-top也为50px时，我们发现子盒子没有距离父级的上边50px，而是纹丝不动。
3.当我们给子盒子设置margin-top为100px时,我们会惊奇的发现，子盒子带着父盒子一起向下移动了100px。
上述出现的问题便是margin塌陷：父盒子与子盒子margin-top谁大就用谁的值。
那么如何解决这个小问题呢？
方法一
改变父级元素的渲染规则，使其变为BFC元素
如何触发一个盒子的BFC？一般有以下四方法：
①position:absolute;
②display:inline-block;
③float:left/right;
④overflow:hidden;
所以给父级元素加上以上任一css属性（如：加上display:inline-block;）
上述margin塌陷问题便会解决
<
最低0.47元/天 解锁文章
扫一扫
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
