Html 嵌套 div 中的边距顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2890354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
margin-top in a nested div
提问by JuanPablo
I have a problem with the margin-topin a nested div -- when I apply margin-topto the nested div, the margin is applied to the parent div insteadof the nested div.
Any ideas?
我margin-top在嵌套 div 中遇到了问题——当我应用margin-top到嵌套 div 时，边距应用于父 div而不是嵌套 div。
有任何想法吗？
采纳答案by edl
Margins will collapse by design. Add 1px of padding as well and it should work fine.
边距会按设计崩溃。也添加 1px 的填充，它应该可以正常工作。
回答by JuanPablo
I get the solution with overflow:auto in the parent div.
我得到了在父 div 中使用 overflow:auto 的解决方案。
回答by alex
This is how margins work.. the margin is the space between the next element with a margin / padding / similar. It is not necessarily defined as its parent element. Consult the spec.
这就是边距的工作原理。边距是下一个元素之间的空间，带有边距/填充/类似。它不一定定义为其父元素。请参阅规范。
Here are some things you can do as a workaround
以下是您可以做的一些解决方法
Use Padding Instead
改用填充
This just means instead of using margin-top: 10px;you use padding-top: 10px;. This is not suitable for every occasion.
这只是意味着而不是使用margin-top: 10px;您使用padding-top: 10px;. 这并不适合所有场合。
Weird Hack I Discovered
我发现的奇怪的黑客
I doubt I discovered this initially, but the other day I solved the problem like this. I had a <div id="header" />that I wanted to give a top margin too, and its top margin was pushing the parent (bodyelement) down as well. So I did this on the bodyelement...
我怀疑我最初发现了这一点，但前几天我解决了这样的问题。我有一个<div id="header" />我也想给上边距的，它的上边距也将父body元素（元素）向下推。所以我在body元素上做了这个......
body {
padding-top: 1px;
margin-top: -1px;
}
This made my margin work. You can also try using a border, like border: 1px solid #ccc.
这使我的保证金工作。您也可以尝试使用边框，例如border: 1px solid #ccc.
It would also be wise to leave a note in the CSS comments to explain why you have that peculiar pair of rules. I just added /* this is to stop collapsing margins */.
在 CSS 注释中留下注释来解释为什么你有那对特殊的规则也是明智的。我刚加/* this is to stop collapsing margins */。
Further Reading
进一步阅读
回答by pfrendly
The reason overflow:auto changes the parent div to allow the nested margin-top is that it creates a new formatting context. Any div that's positioned absolute, fixed, floated or with overflow other than visible creates a new formatting context.The parent div then becomes the root of this new formatting context, and collapsing margins don't apply to root elements.
overflow:auto 更改父 div 以允许嵌套 margin-top 的原因是它创建了一个新的格式上下文。任何定位为绝对、固定、浮动或溢出而不是可见的 div 都会创建一个新的格式上下文。然后父 div 成为这个新格式上下文的根，折叠边距不适用于根元素。
More in depth:
更深入：
Formatting contexts can be either inline or block, and only the block formatting contexts collapse their margins. These formatting contexts form the flow of the document.
格式化上下文可以是内联的也可以是块的，并且只有块格式化上下文折叠它们的边距。这些格式化上下文形成了文档流。
A block formatting context is simply all the block level elements (e.g. divs, p, table) laid out one after another vertically within a containing block until the end of the document/container or until a new formatting context is established.
块格式上下文只是在包含块中垂直排列的所有块级元素（例如 div、p、table），直到文档/容器的结尾或直到建立新的格式上下文。
In the case of nesting, the margin-top of the child collapses with the margin-top of the parent since both divs are part of a block formatting context. By setting overflow to auto, the parent div becomes the container of the new formatting context, and the child the first block element within it. Thus the two margins are no longer "adjoining" since the parent div is now the root.
在嵌套的情况下，子元素的 margin-top 与父元素的 margin-top 折叠在一起，因为两个 div 都是块格式上下文的一部分。通过将overflow 设置为auto，父div 成为新格式化上下文的容器，子div 成为其中的第一个块元素。因此，两个边距不再“相邻”，因为父 div 现在是根。
Hope that helps.
希望有帮助。
Box model: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
盒子模型：http: //www.w3.org/TR/CSS2/box.html#collapsing-margins
Visual formatting model: http://www.w3.org/TR/CSS2/visuren.html#normal-flow
回答by LucaM
"Collapsing margins" is your problem. Here you could understand what is and why it's still alive: http://www.sitepoint.com/web-foundations/collapsing-margins/
“折叠边距”是您的问题。在这里您可以了解什么是以及为什么它仍然存在：http: //www.sitepoint.com/web-foundations/collapsing-margins/
I read across the web to look for a decent solution, and finally I found this article: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
我在网上阅读以寻找合适的解决方案，最后我找到了这篇文章：http: //www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
In short you have a bunch of methods to resolve your problem:
简而言之，您有很多方法可以解决您的问题：
1) border in parent div (could be transparent)
1）父div中的边框（可以是透明的）
2) padding in parent div
2）在父div中填充
3) overflow: auto
3）溢出：自动
4) float: left
4）浮动：左
You should follow the link because it explains in detail all the solutions.
您应该点击链接，因为它详细解释了所有解决方案。
回答by shadow
You Can also use position property for inner div to fix this. like:
您还可以使用内部 div 的 position 属性来解决此问题。喜欢：
position:fixed;
