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; }也被下推。然后我去萤火虫，应用背景：红色；到身体，整个区域变红，包括边距。
1）为什么会发生这种情况，主体距顶部50像素？
2）如何防止身体被压倒？
谢谢 ：）。
添加display: inline-block;到header
JSFiddle-演示
header {
display: inline-block;
width:100%;
height:100px;
margin-top:50px;
background:rgba(0, 0, 0, 0.4);
}
发生此问题的原因是利润下降：
您的header元素位于顶部边距为50px的实体旁边，并且该边距组合并应用到该实体，这将强制该实体的内容开始于所应用的折叠边距低于（50px）符合框模型的折叠边距。
将div#background具有position: absolute;与绝对定位框可以有利润，但他们不与其他任何利润崩溃，如果除去position: absolute;从div#background，则边缘应用到header不与身体崩溃- DEMO
OR：您还可以添加top: 0px;到div#background- DEMO
保证金崩溃规范：
块的顶部和底部边距有时会合并（折叠）为一个边距，其大小是合并到其中的最大边距，这种行为称为边距折叠。-由Mozilla MDN
阅读更多有关崩溃的边距行为的信息：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句