CSS Margin失效问题

业务架构实验室

已于 2022-08-25 00:08:44 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-CSS 文章标签： css html 前端

于 2022-08-24 23:41:08 首次发布

本文链接：https://blog.youkuaiyun.com/softmanfly/article/details/126514905

前端-CSS 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了CSS中margin塌陷的现象，即子元素的外边距不会与父元素的边距产生间距，而是导致整体元素向内缩进。当父元素没有明确的边框或内边距时，子元素的margin会失效。解决方法是为父元素设置非零边框或内边距。此外，还解释了在没有设置内边距时，整个元素会因body的边距而整体缩进的原因。

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

如下代码中会出现margin失效的情况:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
  
    <div style="width:50px;height: 50px; background: red;">
        <div style="width: 20px; height: 20px; margin: 10px; background: black;"></div>
    </div>
</body>
</html>

渲染效果如图:

会发现子元素并没有顶着父元素的边距向下缩进10px，虽然设置了margin:10px, 反而父子元素作为一个整体被缩进了10px.

为什么会这样呢？

原因是因为父元素的border margin paddinig都为0px(假设我们把这种0px类比为虚的，不存在的百边框), 而margin属性是要顶着有“实体”的框。如果我们设置父元素的border:1px或者 padding:1px，子元素就会按照父元素的"实线"边框按margin属性缩进了。（设置父元素的margin:1px也不会生效，因为margin也是虚的）

效果如图:

代码如下（增加了padding属性）:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div style="width:50px;height: 50px; background: red; padding: 1px;">
        <div style="width: 20px; height: 20px; margin: 10px; background: black;"></div>
    </div>
</body>
</html>

再来说为什么在没设置padding之前，整体会距离最外面的body缩进。因为外层元素的盒子在计算里层元素盒子边框距离的时候是父的margin + border + padding + 子元素的margin border padding, 所以父子元素作为整体会顶着body的上边距缩进10px