Collapsing Margins Between Adjacent Elements

negative margins effect collapsed margins

by fezec

HTML

<div class="normal_collapsed_margins">
    <h1>
        This paragraph has a bottom_margin of 25px
    </h1>
    <p>This paragraph has a top_margin of 20px</p>
       my above collapsed margin equeals 25px;
</div>

<div class="negative_collapsed_margins">
    <h1>
        This paragraph has a bottom_margin of 25px
    </h1>
    <p>This paragraph has a top_margin of 20px</p>
    my above collapsed margin equeals 5px;
</div>

SCSS

.normal_collapsed_margins{
 
p {
  margin: 20px 0 0 0;
}
}

p{
     background: #cf9;
}

h1 {
  margin: 0 0 25px 0;
  background: #cfc;
}

div{
       border:1px solid black;
}


.negative_collapsed_margins{
    margin-top:50px;
    p {
        
  margin: -20px 0 0 0;
}
}