• HOME
  • web
  • body に勝手に余白ができてレイアウトがズレる問題と対処法

body に勝手に余白ができてレイアウトがズレる問題と対処法

◆ 症状：要素が左上にぴったり揃わない

ページ制作中に、次のような現象に遭遇することがあります：

  • 画像や背景が左端／上端にピッタリくっつかない

  • 上や左に 1〜2px の白いスキマが見える

  • 明らかに width: 100% を指定しているのに、要素が親要素より小さく表示される

これは**body に自動で付加される初期マージン（＝ブラウザのデフォルトスタイル）**が原因で起こる現象です。

◆ 原因：ブラウザの「User Agent Stylesheet」

多くのモダンブラウザ（Chrome、Safari、Firefoxなど）は、HTMLをレンダリングする際、body に以下のような初期スタイルを付けています：

css
body {
margin: 8px;
}

このマージンは HTMLやCSSで明示的にリセットしない限り必ず効いてしまう ため、画面全体に広がるはずの画像や要素が わずかに縮んで表示されてしまいます。

特に以下のような場面でズレとして目立ちます：

  • ファーストビューで画像が画面幅に収まらず、左や上に白線が出る

  • 背景色がずれて見える

  • スクロールスナップや横スクロール系で余白が発生する

◆ 解決策：body のマージンをリセットする

HTMLファイルのCSSに、以下を明示的に追加するだけでOKです。

css
html, body {
margin: 0;
padding: 0;
height: 100%;
}

これにより、ブラウザの自動マージンが完全に打ち消され、レイアウトがピクセル単位で正確になります。

◆ 応用：画像が縮んで見える時の併用スタイル

画像も一緒に表示がずれることが多いため、以下もあわせて設定すると安心です：

css
img {
display: block;
max-width: 100%;
height: auto;
}

◆ トラブル再現例（before）

html
<body>
<img src="fv.png" class="fv">
</body>
css
.fv {
width: 100%;
}

これだけだと、body に margin: 8px が効いて画像が縮み、端に白線が出る。

✅ 解決例（after）

css
html, body {
margin: 0;
padding: 0;
}

◆ 実務メモ

  • 特に Live Server や CodePen 上で確認しているときは、ブラウザのデフォルトマージンを忘れがち

  • 最初に書くCSSに html, body { margin: 0; } を入れておくだけで、謎のズレトラブルを回避できる

  • reset.css や normalize.css を導入していないときは、自前で最低限のリセットを用意することが重要

◆ まとめ

現象原因対処法
ページ左・上に白線が見えるbody に自動マージンhtml, body { margin: 0; }
要素がピッタリ表示されない親のマージン影響同上＋padding: 0;

「body に勝手に margin: 8px がついてる問題」は、すべてのWeb制作の初期チェックポイント！
レイアウト崩れや背景ズレを見たら、まず body の margin を疑え！

 

 

追記

* は body の margin をリセットできない

これはCSSにおけるセレクターの仕様が関係しています。

css
* {
margin: 0;
padding: 0;
}

この *（ユニバーサルセレクタ）は便利な一方で、実は html や body には完全に効かない場合があります。
特に、ブラウザによっては body の margin にだけ初期値（例：8px）を適用しており、* ではそれが完全に消えないことがあるのです。