嵌套 div 中的 margin-top
我在嵌套 div 中遇到 margin-top 问题 - 当我将 margin-top 应用于嵌套 div 时，边距将应用于父 div 而不是嵌套的div。
有什么想法吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
我在嵌套 div 中遇到 margin-top 问题 - 当我将 margin-top 应用于嵌套 div 时，边距将应用于父 div 而不是嵌套的div。
有什么想法吗？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（6）
我在父 div 中使用 Overflow:auto 得到了解决方案。
I get the solution with overflow:auto in the parent div.
边距会按照设计而缩小。还添加 1px 的填充，应该可以正常工作。
Margins will collapse by design. Add 1px of padding as well and it should work fine.
这就是边距的工作原理。边距是具有边距/填充/类似的下一个元素之间的空间。它不一定被定义为其父元素。 查阅规范。
以下是您可以采取的解决方法：
使用 Padding 代替
这只是意味着您不使用
margin-top: 10px;，而是使用padding-top: 10px;。这并不适合所有场合。我发现的奇怪的黑客
我怀疑我最初发现了这个，但有一天我像这样解决了这个问题。我有一个
我也想给它一个上边距，它的上边距正在推动父元素（body元素）也下来了。所以我在body元素上执行了此操作...这使我的边距发挥作用。您还可以尝试使用边框，例如
border: 1pxsolid #ccc。在 CSS 注释中留下注释来解释为什么你有这对特殊的规则也是明智的。我刚刚添加了
/* 这是为了阻止边距折叠 */。进一步阅读
查看这些其他 问题
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 usepadding-top: 10px;. This is not suitable for every occasion.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 thebodyelement...This made my margin work. You can also try using a border, like
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 */.Further Reading
Check out these other questions on Stack Overflow
Overflow:auto 更改父 div 以允许嵌套 margin-top 的原因是它创建了一个新的格式化上下文。任何绝对、固定、浮动或除可见之外的溢出的 div 都会创建一个新的格式化上下文。 然后，父 div 将成为此新格式化上下文的根，并且折叠边距不适用于根元素。
更深入：
格式化上下文可以是内联的，也可以是块式的，并且只有块格式化上下文才会折叠其边距。这些格式化上下文形成了文档的流程。
块格式化上下文只是在包含块内垂直排列的所有块级元素（例如 div、p、table），直到文档/容器的末尾或直到建立新的格式化上下文。
在嵌套的情况下，子级的 margin-top 会与父级的 margin-top 折叠在一起，因为两个 div 都是块格式化上下文的一部分。通过将溢出设置为 auto，父级 div 成为新格式化上下文的容器，子级成为其中的第一个块元素。因此，两个边距不再“相邻”，因为父 div 现在是根。
希望有帮助。
箱体型号：
http://www.w3.org/TR/CSS2/box.html#collapsing-margins< /a>
视觉格式化模型：
http://www.w3.org/TR/CSS2/visuren.html#normal-flow< /a>
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.
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.
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.
Hope that helps.
Box model:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Visual formatting model:
http://www.w3.org/TR/CSS2/visuren.html#normal-flow
“利润崩溃”是你的问题。在这里您可以了解它是什么以及为什么它仍然存在：http://www.sitepoint。 com/web-foundations/collapsing-margins/
我在网上阅读以寻找合适的解决方案，最后我找到了这篇文章： http://www.seifi.org/css/understand-taming-collapsing-margins-in-css.html
中简而言之，您有很多方法可以解决您的问题：
1）父div中的边框（可以是透明的）
2）父div中的填充
3）溢出：自动
4）浮动：左
您应该点击链接，因为它详细解释了所有内容解决方案。
"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/
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
In short you have a bunch of methods to resolve your problem:
1) border in parent div (could be transparent)
2) padding in parent div
3) overflow: auto
4) float: left
You should follow the link because it explains in detail all the solutions.
您还可以使用内部 div 的位置属性来解决此问题。喜欢：
You Can also use position property for inner div to fix this. like: