marginの相殺について - bnote

「CSS3のbox-sizingがいい！」でレイアウトに影響を与えるpaddingとborderの考え方を確認しましたが、 ここではボックスモデルのもっとも外側にあるmarginの動作について確認していきます。 margin marginで特に注意する必要があるのは、ボックスの上下(top,bottom)に当たるmarginです。 2つのボックスが上下に並ぶ場合、topとbottomのmarginは大きいサイズのmarginを残した形で 表示される仕様となっています。これをマージンの相殺といいます。 マージンの相殺は、必ず発生するわけではなく条件があるので順に確認していきます。 隣接兄弟要素 上下に並ぶ同一階層のマージンは相殺されます。 <div class="box1"></div> <div class="box2"></div> .box1 { margin: 100px 100px