<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.