マージンの相殺

効くときと効かないときがある🤔

兄弟関係

効く

code:sample.html

<p>ほげほげ</p>

<p>ふがふが</p>

code:sample.css

p {

margin: 10px 0;

}

親子関係

効かない…？

以下の例は効く。

code:sample.html

<div>

<p>ほげほげ</p>

</div>

code:sample.css

div {

margin: 20px 0;

}

p {

margin: 10px 0;

}

（大→小の要素、親子の要素の順で、マージンの大きさも大→小で作っていけば間違いなさそう

（padding の指定もしていたりするから、paddingが原因で効かないこともありそう

動作確認

参考

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

（マイナス値関わると大変なことになりそう

浮動する要素 と 絶対位置指定された要素 では、マージンの相殺は起きません。