余白は、CSSでいちばん多く書く指定です。同時に、崩れる原因としてもいちばん多いところ。まずは2つの違いを、目で見て確かめましょう。

背景がどこまで広がるかで見分ける

  • padding … 箱の内側の余白。背景色ごと広がる
  • margin … 箱の外側の余白。背景は広がらず、隣との距離が空く
CODEmargin と padding の違いコードを書き換えると、すぐ下で動きます

背景の青がどこまで広がっているかに注目してください。数字を大きくすると違いがはっきりします。

書き方の省略ルール

値の個数で意味が変わる
padding: 16px;               /* 上下左右すべて16px */
padding: 16px 24px;          /* 上下16px、左右24px */
padding: 8px 16px 24px;      /* 上8px、左右16px、下24px */
padding: 8px 16px 24px 32px; /* 上・右・下・左（時計回り） */

2つ書く形（上下・左右）がいちばんよく使います。4つ書く形は時計回りの順番です。混乱したら、まずは padding-top のように個別に書いても構いません。

余白は「下だけ」に寄せると崩れにくい

見出しの下、段落の下、というように、余白を一方向に統一すると崩れにくくなります。上下の両方に余白を付けると、隣り合ったときにどちらが効いているのか分からなくなるためです。

特に上下の margin どうしがぶつかると、足し算にならず「大きいほうだけ」が採用されます。これをマージンの相殺と呼びます。バグではなくCSSの仕様なので、下方向に統一しておけば、そもそも遭遇しません。

CODEマージンの相殺を見るコードを書き換えると、すぐ下で動きます

1つ目の下に40px、2つ目の上に20pxを指定しています。合計60pxにはならず、大きいほうの40pxだけが空きます。

並んだものの間隔は gap が楽

横並びや縦並びの要素の間隔は、margin より gap を使うほうが簡単です。「間だけ」に均等な余白が入るので、端に余分な余白が付きません。Flexboxやグリッドと組み合わせて使います。

余白が整うと、それだけでページは見違えます。次は、その並べ方そのものを扱うFlexboxに進みましょう。