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 Shishir Morshed

HTML

<div class="container1">
Example: 1
  <div class="content">margin-bottom: 20px;</div>
  <div class="content"></div>
</div>
<br><br>
<div class="container2">
Example: 2
  <div class="content">margin-bottom: 20px;</div>
  <div class="content">margin-top: 20px;</div>
</div>
<br><br>
<div class="container3">
Example: 3
  <div class="content">margin-bottom: 20px;</div>
  <div class="content">margin-top: 40px;</div>
</div>

CSS

[class*="container"]{
  font-family: arial;  
  font-size: 12px;
}

.content {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  font-family: consolas;
  padding: 10px;
  box-sizing: border-box;
}

.content:first-child {
  margin-bottom: 20px;
}

.container2 .content:last-child {
  margin-top: 20px;
}

.container3 .content:last-child {
  margin-top: 40px;
}