logo标签列表

嵌套div中的margin-top

htmlcssmargin
42

我在嵌套的div中使用 margin-top 时遇到问题——当我将 margin-top 应用于嵌套的div时，边距被应用于父div而不是嵌套的div。

有什么想法吗？

在某些情况下，您可以尝试使用padding-top:40px进行测试。您还可以使用padding-top:40px !important; - Junior Mayhé
这似乎是 CSS 所做的数以亿计的例子之一。然而，它所应该做的完全违反直觉。 - nicodemus13
一个非常好的解释为什么会发生这种情况以及如何处理它。http://www.sitepoint.com/web-foundations/collapsing-margins/ - sidneydobber
可能是为什么这个CSS margin-top样式不起作用？的重复问题。 - Pavel Gatnar
6个回答
53
我使用父元素的overflow:auto属性解决了问题。
5
这绝对是最好的解决方案...这应该是正确答案！ - Pier
我赞同！正是我在寻找的！ - James Ford
非常感谢您的解决方案 :) - d3vpasha
33

边距会因设计而折叠。添加1px的填充，也应该可以正常工作。

3
这里有一个相当可接受的解释：http://www.howtocreate.co.uk/tutorials/css/margincollapsing - Frank N
18

这就是边距的工作原理..边距是下一个具有边距/填充/类似属性元素之间的空间。它的定义并不一定是其父元素。请参考规范。

以下是一些可行的解决方法

使用填充代替

这只是意味着你可以使用 padding-top: 10px; 替代 margin-top: 10px;。这种方法并不适用于所有情况。

我发现的奇怪Hack

我怀疑我不是最初发现这个解决方案的人，但前几天我是这样解决问题的。我有一个 <div id="header" />，我想给它一个上边距，但它的上边距也将父元素（body元素）向下推。所以我在 body 元素上这样做...

body {
    padding-top: 1px;
    margin-top: -1px;
}

这使得我的边距生效了。你也可以尝试使用边框，比如 border: 1px solid #ccc。

在 CSS 注释中添加说明，解释为什么要使用这种特殊的规则是明智的。我只是添加了 /* this is to stop collapsing margins */。

进一步阅读

请查看 Stack Overflow 上关于其他问题和讨论

8
overflow:auto将父div更改为允许嵌套margin-top的原因是它创建了一个新的格式化上下文。任何定位为absolute、fixed、floated或overflow属性不为visible的div都会创建一个新的格式化上下文。然后，父div成为此新格式化上下文的根元素，而折叠边距不适用于根元素。

更深入地说：

格式化上下文可以是内联的或块级的，只有块级格式化上下文才会折叠其边距。这些格式化上下文形成文档的流程。

块级格式化上下文只是所有块级元素（例如div、p、table）在包含块中垂直地一个接一个地布置，直到文档/容器的末尾或建立新的格式化上下文。

在嵌套的情况下，子元素的margin-top与父元素的margin-top合并，因为两个div都是块级格式化上下文的一部分。通过将overflow设置为auto，父div成为新格式化上下文的容器，而子元素则是其中的第一个块级元素。因此，这两个边距不再“相邻”，因为父div现在是根元素。

希望这有所帮助。

盒模型： http://www.w3.org/TR/CSS2/box.html#collapsing-margins

视觉格式化模型： http://www.w3.org/TR/CSS2/visuren.html#normal-flow

4
“折叠边距”是你遇到的问题。你可以在这里了解什么是折叠边距以及为什么它仍然存在：http://www.sitepoint.com/web-foundations/collapsing-margins/ 我查阅了网上的许多资料，最终找到了这篇文章：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html 简单来说，有许多方法可以解决你的问题：
1）父级 div 使用 border（可以是透明的）
2）父级 div 使用 padding
3）overflow: auto
4）float: left
你应该点击链接，因为它详细地解释了所有的解决方案。
0

你也可以使用位置属性来固定内部div，例如：

position:fixed;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接