【HTML･CSS】ページ上部の隙間(余白､空白)を消す(埋める､詰める)方法

<body>タグ(要素)の margin (またはmargin-top)の値を 0 に設定する方法と合わせて
ページの上部に隙間無くピッタリくっ付ける方法をいくつかメモ。

[HTML]（修正前）

<body>

<div id="header">
 <h1>！サイトのタイトル！</h1>
</div>

</body>

[CSS]（修正前）

#header{
 background-color:#9cf;
}

▼領域を上方へ詰めて消す

<body>タグ(要素)の margin (またはmargin-top)の値を 0 に設定しても隙間が残る時は
<div>タグなどで囲われている要素の margin が領域を飛び越えて影響してる場合があります。

下の画像の場合は、<h1>タグ(要素)の影響で上方に隙間ができていたのを
<h1>タグに margin (またはmargin-top)の値を 0 に設定したので
領域が上方へ詰めて隙間が消えています。
<h1>タグ以外に<p>タグなどの場合でも同じ方法でできます。

[HTML]

<body>                            <!-- ←CSS設定 -->

<div id="header">
 <h1 id="title">！サイトのタイトル！</h1>  <!-- ←CSS設定 -->
</div>

</body>

[CSS]

body{
 margin:0;            /* ←追加 */
}

#header{
 background-color:#9cf;
}

#title{
 margin:0;            /* ←追加 */
}

領域の内にある要素の margin の設定を変える以外に
領域を作っている<div>タグ(要素)などを padding で広げて上方の隙間を消す方法があります。

下の画像の場合、
領域を作っている<div>タグに padding (またはpadding-top)の値を 1px に設定すると
自動的に端まで広がって消しています。(padding の値は最低 1 は必要です。)
領域の広がる幅は、囲われている要素によってまちまちです。

[HTML]

<body>                 <!-- ←CSS設定 -->

<div id="header">                 <!-- ←CSS設定 -->
 <h1>！サイトのタイトル！</h1>
</div>

</body>

[CSS]

body{
 margin:0;            /* ←追加 */
}

#header{
 background-color:#9cf;
 padding:1px;           /* ←追加 */
}

[ 2012/06/27 13:57 ] HTML･CSS | TB(0) | CM(2)