マージンの相殺

CSSでmargin設定をしたのに意図しない状態になることはよくある。 「マージンの相殺」という言葉を知っていれば対応策が検索で見つかるだろう。 兄弟要素の縦並びで 上の要素の margin-bottom:10px 下の要素の margin-top:10px で間隔は  10px + 10px =20px  にはならない。 この状態の時はどちらか大きい方の値がセットされるので、結果は 10px　になる。 これを理解していれば対応は可能だろう。 他のパターンとして親の要素を