<h2>margin collapsing</h2>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<h2>overflow: hidden</h2>
<div class="parent solution_one">
  <div class="child"></div>
  <div class="child"></div>
</div>
<h2>display: inline-block</h2>
<div class="parent solution_two">
  <div class="child"></div>
  <div class="child"></div>
</div>
.parent{
  background-color: #eee;
}
.child{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px;
}
.solution_one{
  overflow: hidden;
}
.solution_two{
  display: inline-block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.