内側の余白と外側の余白

padding を足すと、枠線と文字のあいだが広がる。箱そのものが内側から膨らむイメージだよ。

背景色や枠線をつけた箱が窮屈に見えるときは、まず padding を疑おう。

margin を足すと、箱ととなりの箱のあいだが空く。箱の大きさは変わらず、位置だけ離れるんだ。

並べたものがくっついているときは margin の出番。

どちらも辺の名前を足せば1辺だけに効く。padding-top margin-left のように書くよ。

値を1つだけ書いた padding: 16px; は4辺ぜんぶ 16px という意味になる。

margin には auto（自動）という値もある。幅を決めた箱に margin: 0 auto; と書くと、左右の余白が同じだけ自動で入り、まん中にそろう。

前に inline-block でやった中央寄せは、ふつうこちらで書くよ。ここから書いてみよう。