CSSマージンの折りたたみ

Question

では、本質的に、特定の div 要素にマージン、パディング、またはボーダーを設定しない場合、マージンの折りたたみは発生しますか?

Answer 1

いいえ。隣接する 2 つの垂直マージンがある場合、2 つの大きい方のマージンが使用され、もう一方は無視されます。

たとえば、2 つのブロック表示要素 A があり、その下に B があり、A の下マージンが 3em、B の上マージンが 2em である場合、それらの間の距離は 3em になります。 。

ボーダーやパディングを設定すると潰れが発生するのを防ぎます。上の例では、2 つの要素間の距離は 5em になります。

マージンを設定しない場合、折りたたむためのマージンはありません。使用中の要素タイプとはまったく関係がありません。要素タイプだけでなく、すべての要素タイプに適用できます。 <div> 要素。

読む CSS 2.1仕様 詳細については。

Answer 2

「マージンを折りたたむという表現は、2 つ以上のボックス (隣り合ったり入れ子になったりすることもある) の隣接するマージン (空ではないコンテンツ、パディングまたは境界領域、またはそれらを区切るクリアランスがない) が結合して 1 つのマージンを形成することを意味します。」

ソース： ボックスモデル - 8.3.1 マージンの縮小