[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

marginの相殺について、まずはクイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか？ What's the Deal with Collapsible Margins? これは「マージンの相殺（Collapsing Margins）」と呼ばれるものです。 このマージンの相殺とは何なのか？ いつどういう条件の時に起こるのか？ それぞれどのように回避できるのかを紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 marginの相殺についてアンケート CSSのmarginがどのように機能するか marginの相殺（Collapsing Margins）とは marginの相殺は

[joltkun]

“マージンの相殺は、垂直マージンを指定した2つのブロックレベル要素が並んだ時に起こります。マージンの相殺が起こると、2つのマージンのうち大きい方（等しい場合はいずれか）が1つのマージンとしてみなされます”

[yorkfield]

例えば、画像と本文の間を空けたいから画像に上下マージンを設定したとき、相殺が無いと画像が連続したとき妙に画像同士の間隔が空いてしまう、とかかなあ有益なケースは。

[ko-ya-ma]

なんでこんな面倒くさい仕様に……

[s15i]

相殺が行われるのは有益な局面があるからそういう仕様になっているんだろうと考えているんだけど、そういった例が知りたい。p要素とかli要素とか…？

[hitomit-93-123]

物騒なCSS

[yamasta]

知らなかった。