【CSS・HTML】なんだこの余白！？右側に余白ができた時の対策方法

公開日 2022/1/13

恥ずかしながら、web制作していると右側に謎の余白というか隙間ができて右にスクロールしてしまうことがよくあります。

そんなときに無闇やたらと探してもhtml、cssを全部見直す必要があり、やってられません笑

できるだけ簡単に解決したいのでググってみました。備忘録として御覧ください。

1.余白・隙間の原因

たいていの場合はインナー幅より要素のwidthが大きくなっていることが原因です。
つまり、どの要素がはみ出ているか分かれば解決します！

いちさん（@tips__web）の記事に抜群の解決策が記載されていました。

body内全体にボーダーをしていすれば一瞬で犯人が炙り出されます。

* {
  outline: 2px solid blue;
}

ヘッダーが犯人でした。
widthを修正してあげましょう。

一番最初にたどり着いた方法がこれです。

各々のセクションを順番に非表示にしていき、原因を特定させます。

ただ、この方法だと長いLPなどはかなりの時間がかかり、非効率。あまり推しておりません。

bodyタグの中身全体にoverflow: hidden;を指定する方法です。

<html>
   <body>
      <div class="wrap">
     　　　　　　… コンテンツ …
      </div>
   </body>
</html>

.wrap {
     overflow: hidden;
 }

これは根本的な解決にはなりませんが、余白は無くせますよ。

※bodyにoverflow: hidden;を指定しないでください。ディスプレイサイズ以上は隠され、縦スクロールできなくなります。

参考サイト

快適な犯人探しを！

タグ