HTML 问题看起来总是那么简单，以至于我几乎觉得问这些问题很尴尬。但不管怎样，我不知道为什么会发生这种情况。
在这个小提琴里http://jsfiddle.net/o5ee1oag/2/ 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 { 位置：绝对; } 也被推低了。然后我转到 Firebug，应用背景：红色；到主体，整个区域变红，包括边缘。
1）为什么会发生这种情况，主体距顶部 50px？
2）如何防止身体被推倒？
谢谢 ：）。
Add display: inline-block; to header
JSFiddle -DEMO http://jsfiddle.net/affevcz9/
header {
display: inline-block;
width:100%;
height:100px;
margin-top:50px;
background:rgba(0, 0, 0, 0.4);
}
该问题是由于边距崩溃而发生的：
Your header元素位于具有上边距 50px 的正文旁边，并且边距组合并应用于正文，这会强制正文的内容从所应用的折叠边距下方（50px）开始，符合盒子模型 http://www.w3.org/TR/CSS21/box.html.
The div#background have position: absolute;并且绝对定位的框可以有边距，但它们不会与任何其他边距折叠，如果您删除position: absolute; from div#background然后将边距应用于header并且不要和身体一起倒塌——DEMO http://jsfiddle.net/8mworj24/
OR:您还可以添加top: 0px; to the div#background - DEMO http://jsfiddle.net/407tdLd1/
边距折叠规格：
块的顶部和底部边距有时会合并（折叠）
成单个边距，其大小是边距组合中最大的
进入其中，这种行为称为边距崩溃。 - 经过Mozilla MDN https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
阅读有关折叠边距行为的更多信息：
- W3.ORG - 8.3.1 折叠边距 http://www.w3.org/TR/CSS21/box.html#collapsing-margins
- Sitepoint - 利润崩溃 http://www.sitepoint.com/web-foundations/collapsing-margins/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
