当我添加按钮导航时，为什么标题会被按下？

Question

#header位于浏览器的顶部，没有空格。 但当我添加这个#buttons div时，它按下了标题，在顶部创建了大约半英寸的空白区域？我怎样才能把空间拿出来？

CSS

#body { margin: 0;}
#container {width:776px; height: 614;}
#content {margin-left: 40px; margin-top: -24px; width: 601px; height: 614;}
#buttons {margin-top: 70px;}
#header {position:absolute; margin-top: 0; height: 57px; width: 776px; background: url(images/headerbg.jpg) no-repeat;

HTML

<div id="container">
<div id="header"> </div>
<div id="navbar"> </div>
<div id="content"> 
     <div id="buttons"> <img src="images/btn_intro.gif" /></div>
</div>

Answer 1

因为它继承它从没有浮点集的父“#layout”浮动。

#buttons {
    float:left;
}

Answer 2

您正在使用

#buttons {float:inherit;}

inherit意味着使用与其父级具有相同属性相同的值。

您可以将其更改为

#buttons {float:left;}

如果不起作用

#buttons {display: inline-block;}