<h2>Margin Collapsing(1)</h2>
<div class="first">hello</div>
<div class="second">hello</div>
<p>초록색 박스에는 margin-bottom: 30px을 주고, 빨간색 박스에는 margin-top: 20px을 주었을 때, 
<br> margin이 50px이 되는 것이 아닌, 둘 중 큰 값인 30px을 선택한다.
</p>
<br>

<h2>Margin Collapsing(2)</h2>
<div class="parent1">
  <div class="child1"></div>
</div>
<p>빨간색박스에 margin-top을 20px 줬는데 빨간색의 부모인 초록색박스에 margin-top을 준 것 처럼 되었다.
<br>우리가 생각했던 것은 초록색 박스 안에서 빨간색박스가 20px 내려오는 것이다.
</p>
<br>

<h2>Margin Collapsing(3)</h2>
<div class="parent2">
  <div class="child2"></div>
</div>
<div class="other"></div>
<p>빨간색박스에 margin-bottom을 20px 줬는데 빨간색의 부모인 초록색박스에 margin-bottom을 준 것 처럼 되었다.
<br>우리가 생각했던 것은 초록색 박스 안에서 빨간색박스가 20px 올라가는 것이다.
</p>
<br>

<h2>MarginCollapsing 해결법</h2>
<ul>
  <li>parent에 inline-block주기</li>
  <li>parent에 border 주기</li>
  <li>parent에 overflow:hidden주기</li>
  <li>parent에 flow-root주기</li>
</ul>
<div class="parent3">
  <div class="child2"></div>
</div>
<div class="other"></div>
h2, p{
  margin: 0;
}

div{
  width: 100px;
}

/* Margin Collapsing(1) */
.first{
  background-color: teal;
  margin-bottom: 30px;
}
.second{
  background-color: red;
  margin-top: 20px;
}


/* Margin Collapsing(2) */
.parent1{
  background-color: teal;
}
.child1{
  height: 30px;
  width: 20px;
  margin-top: 20px;
  background-color: red;
}

/* Margin Collapsing(3) */
.parent2{
  background-color: teal;
}
.child2{
  height: 30px;
  width: 20px;
  margin-bottom: 20px;
  background-color: red;
}
.other{
  height: 30px;
  background: orange;
}

/* Margin Collapsing 해결법 */
.parent3{
  background-color: teal;
/*   border: 1px solid black; */
/*   display: inline-block; */
/*   overflow: hidden 주기 */
/* 부모 요소에 overflow: hidden을 주면 자식 요소가 부모 요소 범위 밖으로 나가지 못하게 됩니다. 품 안의 자식이 되는 것. 부모의 밖으로 나가지 못한 자식요소는 부모 요소 안에서만 있게 된다. */
  display: flow-root;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.