【CSS】ブラウザでbodyタグのマージンが0なのに上に隙間ができる理由

更新日：2026/05/14

Webサイトを外観から作成していると、思うようにスタイル設定ができないことがあります。
今回は、ブラウザの上端とサイトのヘッダー部分に隙間ができてしまいました。
見た目が悪いので隙間を解消しましょう。

 

隙間が無いように設定したつもり

bodyとbody直下のタグのマージンをゼロにした。
これでbody直下のタグは、ブラウザの上端ピッタリに配置されるはず。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      body,
      #top {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: blue;
      }
      #top {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div id="top">
      <p>隙間ある？</p>
    </div>
  </body>
</html>

ブラウザで表示してみると…

上端に隙間ができた

上端に隙間ができた。

bodyタグのパディングはゼロなので、#topはbodyの上端と一致しているはず。
では、ブラウザの上端とbodyタグの間に隙間ができたのでしょうか？

 

上端付近の要素のmargin-topが突き抜けている

実際には、ブラウザの上端とbodyタグの間に隙間はありません。
bodyタグと#topの間に隙間ができています。

親要素の縦方向のマージンとパディングおよびボーダー幅の合計よりも子要素のマージンが大きい場合、その分のマージンが親の外側に適用されます。

今回の例は、#topのマージンとパディングおよびボーダーがゼロです。
ですが、pタグのデフォルトmarginがゼロより大きかったため、その分のマージンが#topの外側に適用されました。

Pのマージン

この現象は下側（margin-bottom）でも発生します。
ブラウザの下端に隙間があるけど、原因がわからなくて放置していませんか？

 

本当にmarginが問題なのかの検証

次のスタイルを適用して隙間が解消されたら、何らかの要素のマージンが隙間を作り出していることを確認できます。

* {
  margin-top: 0;
}

bottom側に隙間ができるときは、margin-topをmargin-bottomに変更して確認しましょう。

 

対処法

対処法はいくつかあります。

  • 対処法1:親のoverflowをhiddenやauto等にする
  • 対処法2:親のpaddingを十分な大きさに設定する
  • 対処法3:子のmarginを小さく設定する

対処法1と2は、親要素内の隙間が広くなることが多いです。
ネストが深いときは問題となる子要素の特定が難しいですが、対処法3がおススメです。

更新日：2026/05/14

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。