Why does second div with the same margin top value as the first div with margin bottom has no effect?

Question

Code below. Shouldn't it have 4rem gap? If I increase the div2 margin top to say 4, then the gap increases.

<!DOCTYPE html>
<html>
<body>

<h1>Margin test</h1>

<div style="border:5px solid red;margin-bottom:2rem;">Div 1</div>
<div style="border:5px solid green;margin-top:2rem;">Div 2</div>

</body>
</html>

score 0 · Accepted Answer · answered Mar 06 '22 at 19:37

0

In CSS, margins can collapse. Here's some light reading: https://www.joshwcomeau.com/css/rules-of-margin-collapse/

Adding a <br> between the two divs should prevent the margins from collapsing.

answered Mar 06 '22 at 19:37

RShields

316
1
8

Why does second div with the same margin top value as the first div with margin bottom has no effect?

1 Answers1