<div class="parent">
  <div class="a one"></div>
  <div class="a two"></div>
</div>
/*
Try to uncomment one of the properties and see how the distance between the two divs and their parent change. Right now their margins are collapsed together.

Properties with same number must be active together to have effect.

Note that children margins are outside of parent container (Margin collapsing work on margin 0 as well).
 */
.a {
  height: 100px;
  width: 100%;
  // display: inline-block; /* [1] */
  
}
.one {
  margin: 20px 0;
  background-color: #FA366A;
  // float: left; /* [7] */
  // contain: layout; /* [10] */
}

.two {
  margin: 50px 0;
  background-color: #0F78A0;
  // clear: both; /* [7] */
  // float: left; /* [6] */
}

.parent {
  margin-top: 100px;
  width: 100%;
  background-color: rgba(120, 47, 178, 0.3);

  // padding: 1px; /* [5] */
  // border: 1px solid black; /* [4] */
  // overflow: hidden; /* [8] */
  // display: flow-root; /* [9] */
  // contain: layout; /* [10] */
  
  // display: inline-block; /* [2] */
  // display: inline; /* [3] */
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.