Explore the concept of margin collapse in this example.
.ct1{
background: red;
margin:40px;
border:1px solid;width:100%;
}
.ct2{
background: pink;
margin:40px;
border:1px solid;width:100%;
}<div class="ctbox">
<div class="ct1">first</div>
<div class="ct2">second</div>
</div>Experience how margins collapse occurs between two divs ct1 and ct2, resulting in a distance that is not simply 40px + 40px = 80px, but rather just 40px.
By adding the CSS property display:inline-block; to either ct1 or ct2, you can eliminate the margins collapse and ensure that the distance between them is indeed 80px. Discover why display:inline-block; helps prevent margins collapse.