縦方向にmarginが重なった場合、marginは相殺されます。
相殺って難しい言葉ですよね。
簡単にいうと、「長い方の長さが優先される」
例を見てみましょう。
<div class="box1"></div>
<div class="box2"></div>
.box1 {
width: 300px;
height: 300px;
background: #f00;
margin-bottom: 50px;
}
.box2 {
width: 300px;
height: 300px;
background: #00f;
margin-top: 30px;
}
margin-bottom: 50px;を上のboxから
margin-top: 30px;を下のboxから取るので、marginは重なり合います。
重なり合うと、長い方が優先されるためここの余白は50pxとなります。
![](https://i0.wp.com/community-world.site/wp-content/uploads/2022/08/スクリーンショット-2022-08-14-10.19.07.png?resize=219%2C351&ssl=1)
インスタでHTML,CSSのクイズを配信中