解决margin塌陷问题？

最新推荐文章于 2025-05-19 19:05:59 发布

xiaobai_IT_learn

最新推荐文章于 2025-05-19 19:05:59 发布

阅读量971

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端html和css 文章标签： margin塌陷 margin-top marginhebing

本文链接：https://blog.youkuaiyun.com/xiaobai_IT_learn/article/details/95762521

前端html和css 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了margin塌陷的概念，通过示例说明body下元素margin的相对关系，当第一个子元素margin大于默认值时会出现子元素带父元素走动的塌陷现象。同时给出解决方法，如给父元素加overflow:hidden、设置border、padding值、position:fixed、display:table等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.理解什么是margin塌陷

先看一个demo
在这里插入图片描述

效果图如下
在这里插入图片描述

给parent1加上

margin-top: 20px;

下面橙色区域是margin-top，此时是相对于body的（其实body也有默认margin，为8，此时取body和parent1的最大值，这为margin合并）
在这里插入图片描述
接下来给parent2加上

margin-top:20px;

parent2相对于parent1整体向下滑动20px，parent1不变化；

在这里插入图片描述
接下来，我们把children1加上

margin-top:8px；

我们可以看到1和3处没有变化，只有2处向下移动8px；从上面的列子可以看到，parent1的margin是相对于body的，而parent2的margin是相对于parent1的，chidren1的margin是相对于body的，chidren2的margin是相对于chidren2的，chidren2的margin是相对于parent1的。总而言之，body下的第一个元素和第一个元素下的第一个元素margin都是相对于body的（margin-top大于8px会出现margin塌陷），body下其他元素（包括其第一个子元素）则是margin相对于上一个元素，body下其他元素不包括第一个元素则是margin相对于上一个子元素。当出现第一个子元素margin大于默认值时（body默认8px，div没有默认值），子元素会带着父元素走动，这种现象就做margin塌陷。
在这里插入图片描述

2.解决margin塌陷问题

①给父元素加上overflow:hidden;
给parent1和parent2加上之后，margin-top:8px;出现了。
在这里插入图片描述
②为父盒子设置border，为外层添加border之后父子盒子就不是真正意义上的贴合了
可以看到设置border: 1px solid red;之后，同样达到效果

③为父元素设置paddin值
可以看到我给父元素设置了padding: 5px;之后，达到要求。
在这里插入图片描述
④设置position:fixed;
当给parent1设置了如下参数之后，达到效果。

⑤给父元素设置display:table;
给parent1设置了display:table;