1

少しやってから休憩しましたが、すべて問題ありません。ヘッダーがページの上部とそれ自体の間にギャップがあることを確認するために戻ってきました。理由はわかりませんが、保存されていないか何かである必要がありますが、何が問題なのかわかりません...

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;
}
4

2 に答える 2

2

あなたの問題は #logo のマージントップです。

解決策の 1 つは、#logo のマージンではなく、#header のパディングとして上部 20 ピクセルのスペースを追加することです。

http://jsfiddle.net/JRPwr/

/*-- 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 の質問に記載されています: 子要素のマージンが親要素を移動します。

于 2013-06-13T00:07:49.083 に答える
2

ではimg#logo、使用margin-top: 0px;

于 2013-06-12T23:57:30.500 に答える