CSSでのmarginの相殺(marginでうまく幅が取れない)

縦方向に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のクイズを配信中

インスタグラムはこちら