<body>タグ(要素)の margin (またはmargin-top)の値を 0 に設定する方法と合わせて
ページの上部に隙間無くピッタリくっ付ける方法をいくつかメモ。
<body>
<div id="header">
<h1>!サイトのタイトル!</h1>
</div>
</body>
#header{
background-color:#9cf;
}
<body>タグ(要素)の margin (またはmargin-top)の値を 0 に設定しても隙間が残る時は
<div>タグなどで囲われている要素の margin が領域を飛び越えて影響してる場合があります。
下の画像の場合は、<h1>タグ(要素)の影響で上方に隙間ができていたのを
<h1>タグに margin (またはmargin-top)の値を 0 に設定したので
領域が上方へ詰めて隙間が消えています。
<h1>タグ以外に<p>タグなどの場合でも同じ方法でできます。
<body> <!-- ←CSS設定 -->
<div id="header">
<h1 id="title">!サイトのタイトル!</h1> <!-- ←CSS設定 -->
</div>
</body>
body{
margin:0; /* ←追加 */
}
#header{
background-color:#9cf;
}
#title{
margin:0; /* ←追加 */
}
領域の内にある要素の margin の設定を変える以外に
領域を作っている<div>タグ(要素)などを padding で広げて上方の隙間を消す方法があります。
下の画像の場合、
領域を作っている<div>タグに padding (またはpadding-top)の値を 1px に設定すると
自動的に端まで広がって消しています。(padding の値は最低 1 は必要です。)
領域の広がる幅は、囲われている要素によってまちまちです。
<body> <!-- ←CSS設定 -->
<div id="header"> <!-- ←CSS設定 -->
<h1>!サイトのタイトル!</h1>
</div>
</body>
[CSS]
body{
margin:0; /* ←追加 */
}
#header{
background-color:#9cf;
padding:1px; /* ←追加 */
}