Margin Collapsing

margin collapsing, adjacent margin, vertical margin collapse

by Debasis Panda

HTML

<p class="block blue">This is first paragraph </p>
<p class="block green">This is second paragraph </p>

<div class="block-div blue">
    <div class="block-div green">
        For this vertical margins for the parent div and child div collapsed as well as parent div and the second paragraph collapsed.
    </div>    
</div>

CSS

.block{
    padding: 10px;
    margin: 20px 0;
    color: #fff;
}
.block-div{
    margin: 20px 10px;
    color: #fff; 
}
.blue{
    background: blue;
}
.green{
    background: green;
}