html - 为什么我添加按钮导航时标题被下推？

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

这个问题是因为它继承了父元素的浮点值。

您可以使用以下代码覆盖继承的样式来更新您的代码:

#buttons {
    float: left;
}

同样，您可以将 ID 设置为 inline-block 以获得类似的效果:

#buttons {
    display: inline-block;
}