HTMLでページ上部の余白をなくす方法をご紹介！

みなさんHTMLを作成していて、特にmarginやpaddingなど設定していないが、ページ上部に余白が空いたという事はないでしょうか？

上記の例ではbodyの下にdivがあり、その中の「あいうえお」の上部に余白が空いているのが確認できるかと思います。今回はbodyにもdivにもCSSは何も設定していないのに、なぜか付いている余白を削除する方法をご紹介したします。

HTMLでページ上部の余白をなくす方法としてCSSで余白を消す方法やリセットCSSを使う方法があります。

まずこのページ上部の余白についてChromeのデベロッパーツールなどで正体を見てみましょう。

bodyに対する8pxの余白は設定した記憶はないので、ブラウザ側が自動で付加しているCSSになります。

それではこの余白を消してみましょう。

bodyに対してCSSで「margin: 0」を指定することでページの上部の余白が消え、隙間なく表示することが出来ます。

またこのようなブラウザが初期で設定しているスタイルについてはリセットCSSでクリアすることが出来ます。リセットCSSについては下記の記事でご紹介していますので、ぜひご覧になって下さい。

いかがでしたでしょうか。設定した覚えがないブラウザの初期のスタイルが適応されて、思い通りにデザインが表示されないという経験は誰しも一度はあるかと思います。

この経験を活かして、次からはCSSで対処したり、リセットCSSの必要性を知り、導入してみるという段階に進みましょう。