边缘顶部嵌套的div

我有一个嵌套div中的margin-top的问题 – 当我将margin-top应用于嵌套div时，margin将应用于父div， 而不是嵌套div。

有任何想法吗？

利润率将通过devise而崩溃。添加1px的填充以及它应该工作正常。

我得到的解决scheme溢出：汽车在父div。

这就是利润率的工作方式。利润率是下一个有保证金/填充/相似的元素之间的空间。它不一定被定义为它的父元素。咨询规格。

以下是一些您可以做的解决方法

使用填充代替

这只是意味着不使用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 */ 。

看看Stack Overflow的其他问题

原因溢出：自动更改父div允许嵌套的margin-top是它创build一个新的格式化上下文。 任何位于绝对，固定，浮动或溢出而不是可见的div都会创build一个新的格式化上下文。 父div然后成为这个新的格式化上下文的根，并且折叠边距不适用于根元素。

更深入的：

格式化上下文可以是内嵌或块，只有块格式化上下文折叠边距。这些格式化上下文构成了文档的stream程。

块格式化上下文就是在包含块中垂直布局的所有块级元素（例如div，p，table），直到文档/容器结束或者直到build立新的格式化上下文为止。

在嵌套的情况下，由于两个div都是块格式化上下文的一部分，因此孩子的页边距与父页的页边距最接近。通过将溢出设置为auto，父div成为新的格式化上下文的容器，而子成为其中的第一个块元素。因此，由于母公司现在是根，所以这两个边际不再是“相邻的”。

希望有所帮助。

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

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

“折叠利润”是你的问题。在这里你可以了解什么是为什么它还活着： http : //www.sitepoint.com/web-foundations/collapsing-margins/

我通过networking阅读寻找一个体面的解决scheme，最后我发现这篇文章： http : //www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

总之，你有一堆方法来解决你的问题：

1）在父div的边框（可以是透明的）

2）在父div中填充

3）溢出：自动

4）浮动：离开

你应该按照链接，因为它详细解释了所有的解决scheme。

你也可以使用内部div的位置属性来解决这个问题。喜欢：

 position:fixed;