CSSで左右に余白ができる原因とは？ホームページ制作でよくあるmargin・padding問題の直し方

久しぶりにホームページ制作をすると、「ロゴ画像の左右に余白ができる」「画面端まで広がらない」「なぜか白い隙間が残る」といったCSSのレイアウト問題に悩まされることがあります。

特に10年近く前のHTML/CSS知識で再開すると、現在のブラウザ仕様やCSSリセットの違いによって、昔は出なかった余白が表示されるケースも少なくありません。

この記事では、ホームページの左右余白が消えない原因や、ロゴ画像周辺に余白ができる時の確認ポイントを初心者向けに整理します。

最も多い原因はbodyタグの初期margin

ホームページ全体の左右余白で最も多い原因は、ブラウザが最初からbodyタグにmarginを設定していることです。

特に何も指定していない場合、多くのブラウザではbodyに8px前後の余白が自動で入ります。

body {
  margin: 0;
  padding: 0;
}

この指定を入れるだけで、左右の白い余白が消えるケースはかなり多いです。

古いHTML知識のままだと、この初期marginを見落としやすいです。

ロゴ画像だけ余白ができる場合は、imgタグの仕様が関係している可能性があります。

imgタグは初期状態では「インライン要素」として扱われるため、文字と同じように下側に余白が発生することがあります。

img {
  display: block;
}

または、必要に応じて以下を追加します。

img {
  vertical-align: bottom;
}

これだけで「画像の周囲だけ隙間がある」問題が解消する場合があります。

実際にはbodyではなく、headerやdivなど親要素側にpaddingが設定されていることも非常に多いです。

例えば以下のようなCSSです。

.header {
  padding: 20px;
}

この場合、ロゴ画像自体ではなくheader全体に余白が追加されています。

特にテンプレートや古いCSSを流用している場合、どこかにpadding指定が残っているケースがあります。

現在はブラウザの検証ツールを使うと、どの要素に余白が入っているか色付きで確認できます。

初心者がよくやるのが、画像やdivにwidth:100%を設定する方法です。

.logo {
  width: 100%;
}

しかし、親要素側にmarginやpaddingが残っていると、width:100%でも余白は消えません。

つまり、「子要素」ではなく「親要素」に原因があるケースが多いのです。

最近のCSSでは、box-sizingを最初に設定することも一般的になっています。

* {
  box-sizing: border-box;
}

これを設定すると、paddingやborderを含めたサイズ計算になり、レイアウト崩れを防ぎやすくなります。

昔のCSS知識だけだと、この設定を使っていないケースが多いです。

ロゴ画像周辺だけ余白がある場合、以下も確認すると原因特定しやすくなります。

特に昔のサイトテンプレートを流用している場合、どこかに古いCSSが残っていることがあります。

10年前と比較すると、現在のWeb制作ではブラウザ検証ツールの重要性がかなり高くなっています。

ChromeやEdgeでF12キーを押すと、HTML構造やmargin・paddingが視覚的に確認できます。

CSSだけを勘で修正するより、検証ツールで原因を特定した方が圧倒的に早いです。

左右余白問題で最初に試しやすい基本セットをまとめると、以下になります。

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

* {
  box-sizing: border-box;
}

img {
  display: block;
}

まずはこれを入れて、どこまで改善するか確認すると原因を切り分けやすくなります。

ホームページ制作で左右に余白ができる原因は、bodyの初期margin、親要素のpadding、imgタグ特有の余白など複数あります。

特に久しぶりにHTML/CSSを書く場合は、昔と現在のCSS事情の違いで混乱しやすいです。

まずはbodyのmargin:0、imgのdisplay:block、親要素のpadding確認を行い、ブラウザの検証ツールで原因を特定すると解決しやすくなります。