縦方向に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となります。
インスタでHTML,CSSのクイズを配信中
