margin

このページのプレビューでは、margin の部分を橙色で塗っています（ブラウザの開発者ツールと同じ色です）。実際のページでは margin は透明で、親の背景が見えます。

値の書き方

padding と同じく、1〜4 個の値を並べます。1 個なら 4 辺すべて、2 個なら上下・左右、3 個なら上・左右・下、4 個なら上から時計回りです。

• 24px などの長さ・%：その広さの余白をあけます。% は上下でも親の幅に対する割合です。
• 負の値：箱をその向きに引き寄せ、まわりの要素に重ねられます。プレビューでは、橙色の枠が箱より内側に縮み、その縁が箱の上に点線で見えます。
• auto：余っている広さを割り当てます。幅を決めたブロック要素に margin: 0 auto と書くと、左右が同じになって中央に寄ります。

上下の margin は重なる

縦に並んだブロック要素どうしでは、上の要素の下の margin と下の要素の上の margin が足されず、大きいほうだけになります（margin の相殺）。flex や grid の中では起きません。