marginとpadding
内側が padding、外側が margin
padding と margin はどちらも余白ですが、境目は border です。border より内側が padding、外側が margin になります。背景色は border の下までしか塗られないので、箱そのものを広げたいときは padding、箱どうしを離したいときは margin と覚えてください。
値は上下左右をまとめて書けます。
padding: 24px; /* 四方すべて 24px */
padding: 24px 16px; /* 上下 24px、左右 16px */
margin: 0 0 8px; /* 上 0、左右 0、下 8px */ブラウザは body や見出しやリストに最初から余白を付けています。まず body の余白を 0 にしてから、自分で必要な分だけ足していくと、思ったとおりの見た目にしやすくなります。
margin auto で中央に寄せる
margin の左右に auto を書くと、余った幅を左右で半分ずつ分け合います。つまり箱が真ん中に来ます。
.site-main {
margin-left: auto;
margin-right: auto;
}いまは箱が画面いっぱいに広がっていて余りがないので、見た目はまだ変わりません。幅を決める回で、この 2 行がいっしょに効いてきます。
書くこと
section には内側の padding と下向きの margin を入れます。ヘッダー、フォームの行、リストの余白もあわせてそろえましょう。
課題
- body の margin を 0 にして、代わりに padding でページの外側の余白をとる
- .site-header / .site-main / .site-footer に margin-left と margin-right の auto を書く
- .section の padding を 24px、margin-bottom を 24px にして、箱の中と箱どうしの間隔をとる
- .site-header や .form-row、各リストの余白もそろえる