縦のmarginが足し算にならない？隣り合う余白の相殺を作例で見よう

上の箱に下のmarginを24px、下の箱に上のmarginを32px付けた。間隔は56pxになると思ったのに、32pxだった。縦方向のmarginは、条件によって相殺されることがあるよ。

相殺は、隣り合う余白などが一つの余白として扱われること。今回は、同じ親の中で上下に並ぶ二つの箱と、正のmarginだけに絞って試そう。

条件によって、大きいほうの余白になる

.first { margin: 0 0 24px; }
.second { margin: 32px 0 0; }

通常のブロック配置で隣り合う二つのmarginが相殺される場合、正の値同士なら大きいほうを使う。この例では、24と32を足した56ではなく32pxになる。

箱自体の高さが短くなったわけでも、marginの指定が読み込まれなかったわけでもない。二つの余白をどのように扱うかという、レイアウトの規則なんだ。

Flexの子では、同じ相殺にならない

.stack {
  display: flex;
  flex-direction: column;
}

Flexアイテムのmarginは、このような相殺をしない。作例で親を縦方向のFlexへ変えると、下24pxと上32pxが両方効き、間隔は56pxになるよ。gapは付けていない。

見た目だけでなく、上の箱の下端から下の箱の上端までを測って確認しよう。

作例を切り替えてみよう

1. 通常のブロック配置で、表示される間隔が32pxかを見る。
2. Flexへ切り替え、56pxへ変わるか確かめる。
3. 二つのmarginの指定は同じままか、説明欄を見る。
4. 「最初から試す」で通常のブロック配置へ戻す。

作例の親は、外側との余白の関係が混ざらないようにしている。今回測るのは、内側の隣り合う兄弟の箱の間だけだよ。

親子や負のmarginは、別の条件もある

marginの相殺は、兄弟同士だけでなく親子や空のブロックなどでも起こり得る。また、負の値を含む場合は、単純に大きいほうを選ぶ説明では足りない。

そのため、「縦のmarginはいつでも最大値になる」と覚えないようにしよう。どの要素のどの辺が接しているか、配置方法、borderやpaddingなどの条件を確認する必要があるね。

余白の目的に合う指定を選ぶ

項目の間だけに一定の空きを作りたいなら、FlexやGridのgapが扱いやすい場面もある。ただし、相殺を止めるためだけに、ページ全体の配置を変える必要はないよ。

まず原因を確かめ、既存のレイアウトや読む順番を保ちながら、目的に合う余白の付け方を選ぼう。

編集部ではChromiumで二つの配置と実測の32px・56px、リセットを確認した。ほかの相殺条件まで同じ例で検証した結果ではないよ。余白の付け方はgapとmargin、箱の幅はbox-sizingも参考になるね。