目次
marginプロパティを使ってheader領域の余白を設定していきます。
![](https://teatree-web.com/wp-content/uploads/2022/08/5551d11c6f0cc8d2a5090989b3f79598-1024x408.jpg)
marginの設定
前回まででCSSのボックスモデルについて見てきました。
詳しくは『【CSSのボックスモデルを確認しよう】デベロッパーツールを見ながらヘッダー領域のスタイリング』を読んでみてください。
今回は余白の設定方法についてみていきます。
marginを指定することによって余白を調整することができます。
![](https://teatree-web.com/wp-content/uploads/2022/08/9e0cb99f43a47d22a3df9f6ab56ac5a4.jpg)
ブラウザを見ると外側に余白があることがわかります。
しかしheaderをみていてもmarginが指定されていません。
どこにmarginが指定されているかというと一般的に初期設定でbodyに指定されていることがあります。
![](https://teatree-web.com/wp-content/uploads/2022/08/9f31605e7de2e382cc9505f0d2ddb863.jpg)
なのでbodyのmarginをみてみると今回も8pxの余白が指定されています。
これを0にしてあげれば余白がなくなるのでbodyにmarginを0に指定してあげます。
marginのtop, bottom, right,leftをそれぞれ0pxに指定してあげましょう。
もしくは全部同じpxで指定する場合はmargin: 0px;とも指定できます。
また、0pxの場合は単に0;と指定もできます。
![](https://teatree-web.com/wp-content/uploads/2022/08/5551d11c6f0cc8d2a5090989b3f79598-e1659409557412-1024x740.jpg)
以上