嵌套div中的margin-top

Question

我margin-top在嵌套div中有一个问题- 当我应用于margin-top嵌套div时,边距应用于父div 而不是嵌套div.

有任何想法吗？

Answer 1

我在父div中获得了溢出:auto的解决方案.

Answer 2

边距会因设计而崩溃.添加1px的填充,它应该工作正常.

Answer 3

这是边距的工作原理..边距是下一个元素与边距/填充/类似之间的空间.它不一定被定义为其父元素.查阅规格.

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

使用填充代替

这只是意味着而不是使用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上的其他问题

Answer 4

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

更深入:

格式化上下文可以是内联或块,只有块格式上下文会折叠它们的边距.这些格式化上下文构成了文档的流程.

块格式化上下文就是所有块级元素(例如div,p,table)在包含块中一个接一个地垂直布局,直到文档/容器的末尾或者直到建立新的格式化上下文.

在嵌套的情况下,子项的margin-top与父项的margin-top折叠,因为两个div都是块格式化上下文的一部分.通过将overflow设置为auto,parent div成为新格式化上下文的容器,而child成为其中的第一个块元素.因此,两个边距不再"相邻",因为父div现在是根.

希望有所帮助.