CSS MARGIN COLLAPSE


In CSS, sometimes the top & bottom margins of two elements get merged into one another. Let's say the bottom margin of the above component is greater than the top margin of the below component, the top margin of the lower component will get collapsed into the bottom margin of the above component.


Let's check an example:


h4 {
  margin-bottom: 100px;
}
p{
  margin-top: 30px;
}
Live Demo!


In the above example, <h4> has a margin-bottom of 100px & <p> has a margin-top of 30px. So the vertical margin between these components is supposed to be 130px (100px + 30px), but because of margin-collapse, the actual margin between both the components ends up being 100px.