3 마진 병합 현상

 

웹 사이트 레이아웃 작업을 진행하다 보면 margin-top과 margin-bottom 속성이 제대로 적용되지 않을 때가 있습니다. 이러한 현상은 대부분 마진 병합(collapsing margins) 때문에 발생합니다.

마진 병합이란 인접한 공간에 margin-bottom과 margin-top 속성을 적용할 경우에 두 속성 중 큰 속성값이 작은 속성값을 병합하는 현상을 말합니다. 자주 마주치는 마진 병합 현상에는 형제간에 발생하는 마진 병합 현상, 부모 자식 간에 발생하는 마진 병합 현상이 있습니다.

마진 병합은 상하에서만 일어나는 현상으로 margin-left와 margin-right에서는 발생하지 않습니다. 따라서 Block 요소의 성격을 갖고 있는 태그에서만 발생합니다.