marginの相殺を検証する

「マージンの相殺 | MDN」を読んでる。

隣接兄弟要素の margin の相殺。よく知るやつ。あと要素の margin-top: 1em が前の要素の margin-bottom: .5em を相殺している。ばっちり相殺。

• marginの相殺（隣接兄弟要素） | JSFiddle

親要素と先頭・末尾の子要素の margin の相殺。これもmarginの相殺と呼ぶのか。親要素の margin を子要素の margin が相殺している。よし相殺。

• marginの相殺（親要素と先頭・末尾の子要素） | JSFiddle

空のブロックの margin の相殺。使うことはなさそうだけど、相殺されているのは確認できた。

• marginの相殺（空のブロック） | JSFiddle

おまけの追記

負のマージンが絡む場合には、相殺されたマージンの大きさは、一番大きな正のマージンと一番小さな（もっともマイナスの）マージンの合計値になります。

確認。親要素と先頭・末尾の子要素の margin の相殺で、親要素の正の margin と同じ値を子要素に負の margin を指定したとき、結果として親要素の下の margin が残るっていうのは気づきにくい感じがした。ただ、負の margin を基本的に使わないので遭遇する機会はあまりなさそう。

• marginの相殺（隣接兄弟要素、正のmarginと負のmargin） | JSFiddle
• marginの相殺（親要素と先頭・末尾の子要素、正のmarginと負のmargin） | JSFiddle

ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。

確認。border と padding のようなケースでは気づかぬうちに、ということが起こりそうなんので気をつける。

• marginの相殺（親要素と先頭・末尾の子要素、親要素がborderを持つ場合） | JSFiddle
• marginの相殺（親要素と先頭・末尾の子要素、親要素がpaddingを持つ場合） | JSFiddle
• marginの相殺（親要素と先頭・末尾の子要素、親要素がインラインコンテンツを持つ場合） | JSFiddle
• marginの相殺（親要素と先頭・末尾の子要素、親要素がheightを持つ場合） | JSFiddle
• marginの相殺（親要素と先頭・末尾の子要素、親要素がmin-heightを持つ場合） | JSFiddle