边距占用空间，但没有背景

Question

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

内容层具有白色背景。 当我在margin-20px的内容层中放置另一个div时，将设置边距，但不设置边距顶部的白色背景。 因此，我的文本仍位于内容层的上边界，并且菜单和页脚之间有20px的空间是我不想要的。

http://jsfiddle.net/Bartimi/Y9kWE/

#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）将被忽略）为此目的。）都属于垂直相邻的框边，即形成以下对之一：框的顶边距和其第一个流入子项的顶边距框的底边沿和其下一个流入的子框的顶边距如果父级具有“自动”计算的高度的框的顶和底边距，则框的最后一个流入子级的底边距和父级的底边距，该框未建立新的块格式设置上下文且计算的“最小高度”为零'，零或'auto'计算出的'height'，并且没有流入子项如果某个折叠边距的任何一个组件边距与该边距相邻，则认为折叠边距与该边距相邻。

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

请注意，以上规则暗示：

浮动框与任何其他框之间的边距不会折叠（甚至在浮动框及其流入子框之间也不会折叠）。 建立新块格式上下文的元素（例如浮点数和具有“可见”以外的“溢出”的元素）的边距不会随其流入子元素而崩溃。 绝对定位的盒子的边缘不会塌陷（即使带有流入的盒子也不会塌陷）。 内联阻止框的边距不会折叠（即使带有其流入子框也不会折叠）。 除非块中有间隙，否则流入的块级元素的下边距总是与其下一个流入的块级同级的上边距一起折叠。 如果该元素没有顶部边框，没有顶部填充且子元素没有间隙，则该流入块元素的顶部边缘将以其第一个流入块级子元素的顶部边缘折叠。 如果框的底部没有填充且没有，则“高度”为“自动”且“最小高度”为零的流入阻止框的底边距将以其最后一个流入块级子级的底部边距折叠底边框和孩子的底边距不会因具有间隙的顶边距而崩溃。 如果'min-height'属性为零，并且框既没有顶部或底部边框，也没有顶部或底部填充，并且其'height'为0或'auto'，并且其不包含框，则框自身的边距会折叠行框，其所有流入子页边距（如果有的话）都会崩溃。 当两个或更多页边距崩溃时，结果页边距宽度是折叠边距宽度的最大值。 在负边距的情况下，从正向相邻边距的最大值​​中减去负向相邻边距的绝对值的最大值。 如果没有正的边距，则从零中减去相邻边距的绝对值的最大值。

如果框的顶部和底部边距相邻，则边缘可能会通过它塌陷。 在这种情况下，元素的位置取决于其与其边距被折叠的其他元素的关系。

如果元素的边距与父级的上边距折叠在一起，则框的顶部边框边缘将定义为与父级的相同。 否则，要么元素的父级不参与边距崩溃，要么仅涉及父级的底边距。 元素的顶部边框边缘的位置与元素的底部边框非零时的位置相同。 请注意，已折叠的元素的位置对其他以其边距折叠的元素的位置没有影响； 仅在布置这些元素的后代时才需要顶部边框边缘位置。

Answer 3

用这个

当然可以

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