意外的<body>身体行为,因为它被孩子的边缘顶部推下

Question

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)如何防止身体被压下？

谢谢 :).

Answer 1

添加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),符合框模型.

将div#background具有position: absolute;与绝对定位框可以有利润,但他们不与其他任何利润崩溃,如果除去position: absolute;从div#background,则边缘应用到header不与身体崩溃- DEMO

或者:您也可以添加top: 0px;到div#background- DEMO

保证金崩溃规范:

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是合并到其中的边距中的最大边距,这种行为称为边距折叠.- 由Mozilla MDN提供

阅读有关折叠边距行为的更多信息:

• W3.ORG - 8.3.1折算利润率
• Sitepoint - 折叠边距