HTML问题总是看起来如此简单，我几乎感到尴尬地问他们。但是，就这样，我不知道为什么会这样。
在这个小提琴中http://jsfiddle.net/o5ee1oag/2/正在被标题的边距（50px）推下来：
<body>
<div id="background"></div>
<header>
<ul>
<li>Button 1</li>
<li>Button 2</li>
</ul>
</header>
</body>
结果div＃background {position：absolute;被推倒了。然后我去Firebug，应用背景：红色;身体和整个区域变红，包括边缘。
1）为什么会发生这种情况，身体距离顶部是50px？
2）如何防止身体被压下？
谢谢:)。
答案 0 :(得分：6)
将display: inline-block;添加到header
JSFiddle - DEMO
header {
display: inline-block;
width:100%;
height:100px;
margin-top:50px;
background:rgba(0, 0, 0, 0.4);
}
由于保证金崩溃，问题正在发生：
您的header元素位于身体旁边，其上边距为50px且边距合并并应用于身体，这会强制身体的内容从应用的折叠边距开始低于（50px）符合 box model 。
div#background有position: absolute;，绝对定位的框可以有边距，但它们不会与任何其他边距一起折叠，如果您从position: absolute;移除div#background，那么保证金适用于header并且不会与正文折叠 - DEMO
OR：您还可以将top: 0px;添加到div#background - DEMO
保证金崩溃规范：
块的顶部和底部边距有时会合并（折叠） 单个保证金，其大小是合并的最大边际 进入它，一种称为边缘崩溃的行为。 - 通过 Mozilla MDN
阅读有关折叠边距行为的更多信息：