Question

我有树图层：菜单，内容和页脚。

内容层具有白色背景。当我在内容层中将另一个div放入边距：20px时，它设置边距，但不设置边距顶部的白色背景。所以我的文本仍然位于我的内容层的上边框，而菜单和页脚之间有20个空间，我不想要。

#textfield {
    margin: 20px;
}

我该如何解决这个问题？

Answer 1

删除此边距并为#content添加填充你也需要改变盒子的大小，因为填充
所以：

#content {
    height: 260px;
    width: 680px;
    background-color: #fff;
    text-align: center;
    position: relative;
    padding: 20px;
}

Answer 2

我将用一个解释来扩展我的评论

发生这种情况的原因是折叠边距规则。

您可以在官方w3文档http://www.w3.org/TR/CSS2/box.html#collapsing-margins

中阅读更多相关信息

如果链接失效：

8.3.1折叠边距

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

相邻的垂直边距会崩溃，除了：

根元素框的边距不会折叠。如果顶部和   带间隙的元素的下边距与其边缘相邻   与兄弟姐妹相邻的边缘崩溃但是那个   结果保证金不会随着下边缘而崩溃   父块。水平边距永远不会崩溃。

当且仅当：
时，两个边距相邻
都属于参与其中的流入块级框   阻止格式化上下文没有行框，没有间隙，没有填充和   没有边框将它们分开（请注意某些零高度线框（请参阅   9.4.2）为此目的被忽略。）两者都属于垂直相邻的盒子边缘，即形成以下对中的一对：   盒子的上边距和第一个流入的儿童底部的上边距   在兄弟姐妹之后的下一个流入的盒子边缘和上边缘   最后一个流入子项的下边距和其父项的下边距   如果父母有'自动'计算高度的顶部和底部边距   没有建立新的块格式化上下文的框   零计算'min-height'，零或'自动'计算'高度'，和   没有流入的儿童坍塌的边际被认为是毗邻的   如果其任何组成边距与此相邻，则为另一边际   裕度。

请注意。相邻的边距可以由不是的元素生成   与兄弟姐妹或祖先有关。

请注意上述规则意味着：

浮动框和任何其他框之间的边距不会崩溃（不是   甚至在浮子和流入的孩子之间）。元素的边缘   建立新的块格式化上下文（如浮点数和   “溢出”除“可见”以外的元素不会崩溃   他们流动的孩子。绝对定位的盒子的边距不会   崩溃（甚至没有流入的孩子）。的边缘   内联块框不会崩溃（甚至没有它们的流入   儿童）。始终是流入块级元素的下边距   崩溃与其下一个流入块级兄弟的上边缘，   除非那个兄弟姐妹有通关。流入块的上边距   元素与其第一个流入块级别的孩子的顶部折叠   如果元素没有顶部边框，没有顶部填充和子元素，则为margin   没有许可。流入式块箱的底部边缘带有   'auto'的'height'和零的'min-height'与其最后一个崩溃   如果盒子没有底部，则流入块级孩子的底部边缘   填充没有底部边框，孩子的底部边距没有   具有间隙的上边距崩溃。一个盒子自己的边距   如果'min-height'属性为零，则崩溃，并且它既没有顶部   或底部边框或顶部或底部填充，并具有“高度”   0或'auto'，它不包含行框，以及它的所有内容   流入儿童的边缘（如果有的话）崩溃。当两个或更多的边距   崩溃，产生的边距宽度是折叠的最大值   边距的宽度。在负边距的情况下，最大值   负相邻边界的绝对值从中扣除   最大正相邻边距。如果没有积极的   边距，相邻边距的绝对值的最大值   从零开始扣除。

如果框的顶部和底部边距相邻，那么它就是   边际可能通过它崩溃。在这种情况下，   元素的位置取决于它与另一个元素的关系   边缘正在崩溃的元素。

如果元素的边距与其父元素的上边距折叠，   框的顶部边框边缘定义为与   父母。否则，元素的父元素不参与   保证金崩溃，或只涉及母公司的底部保证金。   元素顶部边框边缘的位置与其相同   如果元素的底部边界非零，则一直存在。请注意   已折叠的元素位置无效   关于其边缘的其他元素的位置   被垮掉;只需要顶部边框边缘位置   布列这些元素的后代。

Answer 3

使用这个，

当然可以正常使用

#content {
    background-color: #FFFFFF;
    display: inline-block;
    height: 300px;
    margin-top: 20px;
    position: relative;
    text-align: center;
    width: 720px;
}

保证金占用空间但没有背景

3 个答案: