CSS - Margin Collapsing

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.

by Rodwyn Moreno

HTML

<div id="parent">
  <div class="child">A</div>
  <div class="child">B</div>
</div>

CSS

#parent {
  border: red solid thin;
}

.child {
  color: #fff;
  text-align: center;
}

#parent .child:nth-child(1) {
  background: #3300ff;
  margin: 10px;
}

#parent .child:nth-child(2) {
  background: #33ff00;
  margin: 5px;
}