【marginで外側の余白を設定】余白の設定方法について

目次

marginプロパティを使ってheader領域の余白を設定していきます。

marginの設定

前回まででCSSのボックスモデルについて見てきました。

詳しくは『【CSSのボックスモデルを確認しよう】デベロッパーツールを見ながらヘッダー領域のスタイリング』を読んでみてください。

今回は余白の設定方法についてみていきます。

marginを指定することによって余白を調整することができます。

ブラウザを見ると外側に余白があることがわかります。

しかしheaderをみていてもmarginが指定されていません。

どこにmarginが指定されているかというと一般的に初期設定でbodyに指定されていることがあります。

なのでbodyのmarginをみてみると今回も8pxの余白が指定されています。

これを0にしてあげれば余白がなくなるのでbodyにmarginを0に指定してあげます。

marginのtop, bottom, right,leftをそれぞれ0pxに指定してあげましょう。

もしくは全部同じpxで指定する場合はmargin: 0px;とも指定できます。

また、0pxの場合は単に0;と指定もできます。

以上

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次