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 设置为 aninline-block以获得类似的效果：

#buttons {
    display: inline-block;
}

Answer 2

您正在使用

#buttons {float:inherit;}

继承意味着使用与他父母拥有的相同属性相同的值。

您可以将其更改为

#buttons {float:left;}

如果不起作用

#buttons {display: inline-block;}