我做了一点后休息一下,一切都很好。我回来看看我的标题在页面顶部和它自身之间有一个间隙。我不知道为什么,我必须没有保存或其他什么,但我无法弄清楚出了什么问题......
http://jsfiddle.net/Zevoxa/tCxaU/
HTML
<div id="header">
<img id="logo" src="/img/logo.png">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
答案 0 :(得分:2)
在img#logo
中,使用margin-top: 0px;
答案 1 :(得分:2)
你的问题是#logo上的margin-top。
一种解决方案是在#header上添加前20px间距作为填充,而不是#logo上的边距。
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
padding-top:20px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
以下StackOverflow问题中提到了替代解决方案: Margin on child element moves parent element