HTMLでページ上部の余白
みなさんHTMLを作成していて、特にmarginやpaddingなど設定していないが、ページ上部に余白が空いたという事はないでしょうか？
上記の例ではbodyの下にdivがあり、その中の「あいうえお」の上部に余白が空いているのが確認できるかと思います。今回はbodyにもdivにもCSSは何も設定していないのに、なぜか付いている余白を削除する方法をご紹介したします。
HTMLでページ上部の余白をなくす方法
HTMLでページ上部の余白をなくす方法としてCSSで余白を消す方法やリセットCSSを使う方法があります。
CSSで余白を消す方法
まずこのページ上部の余白についてChromeのデベロッパーツールなどで正体を見てみましょう。
bodyに対する8pxの余白は設定した記憶はないので、ブラウザ側が自動で付加しているCSSになります。
それではこの余白を消してみましょう。
bodyに対してCSSで「margin: 0」を指定することでページの上部の余白が消え、隙間なく表示することが出来ます。
リセットCSSで対応する
またこのようなブラウザが初期で設定しているスタイルについてはリセットCSSでクリアすることが出来ます。リセットCSSについては下記の記事でご紹介していますので、ぜひご覧になって下さい。
まとめ
いかがでしたでしょうか。設定した覚えがないブラウザの初期のスタイルが適応されて、思い通りにデザインが表示されないという経験は誰しも一度はあるかと思います。
この経験を活かして、次からはCSSで対処したり、リセットCSSの必要性を知り、導入してみるという段階に進みましょう。