【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>タグなどの場合でも同じ方法でできます。

3bt.jpg
[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 は必要です。)
領域の広がる幅は、囲われている要素によってまちまちです。

2bt.jpg
[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)
SPONSORED LINK
人気ブログランキング
トラックバック
この記事のトラックバックURL
http://8cmp.blog.fc2.com/tb.php/7-379bb24a

ありがとうございました!おかげで問題が解決しました!!
[ 2013/07/09 12:57 ] [ 編集 ]
承認待ちコメント
このコメントは管理者の承認待ちです
[ 2013/10/22 16:34 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
▲ページトップ