마진 상쇄 - CSS

마진 상쇄(margin Collapsing)는 html 태그끼리 세로 마진을 겹쳐서 더 큰 마진을 적용한다. 가로 마진은 겹치지 않는다.

 

위 아래 겹치는 태그는 마진 상쇄가 일어난다.

 

부모와 자식간의 태그인 경우 border나 padding이 있으면 마진 상쇄되지 않는다.

 

margin 외에는 상쇄가 일어나지 않음

 

 

- 위 아래 겹치는 태그

<div id="a" style="margin: 40px">
  a
</div>
<div id="b" style="margin: 20px">
  b
</div>

 

세로로 연달아 있는 태그들이다. 이 둘의 마진을 겹치면 40px이 된다.

 

 

 

 

- 부모 자식간에 margin만 있는 경우 (상쇄 됨)

<div id="b" style="margin: 20px;">
  b
  <div id="d" style="margin: 40px;">
    d
  </div>
</div>

 

 

 

 

 

 

 

- 부모 자식간에 border가 있는 경우 (상쇄 안됨)

 <div id="b" style="margin: 20px; border: 1px solid #000000;">
   b
   <div id="d" style="margin: 40px;">
     d
   </div>
 </div>

border 테두리에 막혀서 margin 끼리 상쇄가 되지 않는다.