마진 병합 Margin Collapse

인접 엘리먼트끼리 마진이 서로 충돌할 경우, 더 큰 마진 값으로 통일되어, 작은 마진 값이 무시, 붕괴되는 현상을 말한다. 블록 레벨의 엘리먼트의 상단 마진이 다른 블록 레벨의 하단 마진과 인접한 경우라면 두 마진은 하나의 마진으로 축소되게 된다. 마진 병합 현상은 블록 속성의 상하에서만 발생하는 현상이다.

부모 자식 요소의 마진 병합의 경우, 자식 요소의 마진은 부모 마진으로 적용된다. 만약 부모 요소의 마진 값이 더 큰 값이라면 자식 요소의 마진 값이 무시된다.

마진 병합은 왜 나타나게 되었나?

여러개의 동일한 엘리먼트를 생성하는 경우라면, 일반적으로 마진을 통일시키는 것이 표현에 있어 다 안정적이고 이쁘기 때문이라고 생각한다.

위의 요소를 예로 들자면, 위 아래 마진 값을 가지고 있는 동일한 요소 2개가 있는 경우, 첫번째 요소의 아래 마진 값과 두번째 요소의 위 마진 값이 서로 충돌하여, 다른 여백 대비 더 떨어지는 여백을 가지게 된다. 이렇게 간격이 다른 페이지 보다는 일정한 간격을 통해, 사용자로 하여금 페이지를 좀 더 보기 편하도록 도움을 주고자 만들어진 현상인 것이다.

마진 병합이 나타나는 경우

• 동일한 블록 레벨을 요소가 서로 위 아래의 마진을 가지는 경우
• 부모와 인접한 첫번째 자식 요소에서 첫번째 자식 요소가 위의 마진을 가지는 경우
• 부모와 인접한 마지막 자식 요소에서 마지막 자식 요소가 아래의 마진을 가지는 경우

마진 병합 현상 제어하기

마진 병합이 나타나는 경우를 해결하기 위해서는, 블록 속성을 가진 요소를 다른 요소로 바꾸는 것이 좋다. 가장 많이 사용되는 방법은 inline-block 속성을 사용하는 것이다.

참고
마진 병합 현상(Margin Collapsing)