[CSS] 마진 병합 (Margin Collapsing)

마진 병합은 CSS의 margin 값이 서로 병합되는 현상을 말한다. 마진 병합은 형제 태그끼리 발생하는 것과 부모 자식 간에 발생하는 현상으로 나뉜다. 또한 마진 병합은 상하에서만 일어나는 현상이므로 inline구조에선 발생하지 않으며, margin-top과 margin-bottom 사이에서만 발생한다.

 

형제 태그끼리의 병합 현상

See the Pen Margin Collapsing 1 by hyeon (@longflash) on CodePen.

 

먼저 box1의 margin-bottom은 50px, box2의 margin-top은 100px을 주었고, box3와 box4의 간격은 정확히 100px을 주었다. 하지만 1과 2의 상하 간격이 3과 4의 상하간격인 100px과 같은 것을 볼 수 있다. box1에 50px, box2에 100px을 줬으니, 둘의 간격이 150px로 되야하나 '마진 병합 현상' 때문에 둘 중에서 큰 값인 100px만이 적용되는 것이다. 

 

부모 자신 간의 마진 병합

See the Pen Margin Collapsing 2 by hyeon (@longflash) on CodePen.

 

이 마진 병합은 자식의 margin-top이 부모에게도 영향을 주는 것을 의미한다. 위의 예에서, 부모 박스는 하늘색, 자식 박스는 분홍색이다. 자식 박스에만 margin-top을 100px만큼 줬으니, 하늘색 박스는 움직이지 않고 분홍색 박스만 아래로 이동해야하나, 부모 박스도 자식 박스처럼 똑같이 margin-top값을 갖게 되는 것을 볼 수 있다.