我在嵌套div中遇到margin-top问题 - 当我将margin-top应用于嵌套div时，边距将应用于父div 而不是嵌套的div。
有什么想法吗？
答案 0 :(得分：48)
我在父div中获得了溢出：auto的解决方案。
答案 1 :(得分：31)
边缘会因设计而崩溃。添加1px的填充，它应该工作正常。
答案 2 :(得分：17)
这是边距的工作原理..边距是下一个元素与边距/填充/类似之间的空间。它不一定被定义为其父元素。 Consult the spec
以下是一些可以解决的问题
这意味着您使用margin-top: 10px;而不是padding-top: 10px;。这并不适合任何场合。
我怀疑我最初发现了这个，但有一天我解决了这个问题。我有一个<div id="header" />我也希望给出一个上边距，它的上边距也是推动父（body元素）。所以我在body元素上做了这个...
body {
padding-top: 1px;
margin-top: -1px;
}
这使我的保证金有效。您也可以尝试使用边框，例如border: 1px solid #ccc。
在CSS评论中留下一个注释来解释为什么你有这种特殊的规则也是明智之举。我刚刚添加了/* this is to stop collapsing margins */。
答案 3 :(得分：6)
溢出的原因：自动更改父div以允许嵌套的margin-top是它创建一个新的格式化上下文。任何定位为绝对，固定，浮动或溢出而不是可见的div都会创建一个新的格式化上下文。父div然后成为这个新格式化上下文的根，折叠边距不适用于根元素。 / p>
更深入：
格式化上下文可以是内联或块，只有块格式上下文会折叠它们的边距。这些格式化上下文构成了文档的流程。
块格式化上下文就是所有块级元素（例如div，p，table）在包含块中一个接一个地垂直排列，直到文档/容器的末尾或者直到建立新的格式化上下文。 / p>
在嵌套的情况下，子级的margin-top与父级的margin-top一起折叠，因为两个div都是块格式化上下文的一部分。通过将overflow设置为auto，parent div成为新格式化上下文的容器，而child成为其中的第一个块元素。因此，两个边距不再“相邻”，因为父div现在是根。
希望有所帮助。
包装盒型号： http://www.w3.org/TR/CSS2/box.html#collapsing-margins
答案 4 :(得分：4)
“折叠利润”是你的问题。在这里你可以理解它是什么以及它为什么还活着：http://www.sitepoint.com/web-foundations/collapsing-margins/
我在网上阅读以寻找合适的解决方案，最后我找到了这篇文章：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
简而言之，您有许多方法可以解决您的问题：
1）父div中的边框（可以是透明的）
2）在父div中填充
3）溢出：自动
4）float：left
您应该关注该链接，因为它详细解释了所有解决方案。
答案 5 :(得分：0)
你也可以使用内部div的position属性来解决这个问题。像：
position:fixed;