마진 통합현상(collapsing margin)이란?

컨테이너안에 블록 엘리먼트를 만든후, 블록엘리먼트에 마진값을 주면 컨테이너 전체가 마진값을 먹습니다.

이것은 브라우저 오류가 아닙니다. 이런 현상을 마진 통합 현상이라고 합니다. 수평 마진은 예상했던 대로 작동하나 수직 마진은 예상했던 대로 동작하지 않을 것입니다. 수직 마진에 대하여 조금 더 자세히 이해할 필요가 있습니다.

형제끼리 또는 부모와 자식간에 발생하는 수직 마진은 마진끼리 더하기가 되지 않고 인접한 마진끼리 서로 비교해서 큰 값 하나만 적용이 되는데 이런 현상을 마진 통합이라고 합니다.

.A { magin:100px 0; }
.B { magin:50px 0; }

일단 형제간의 마진 통합을 설명할께요. A와 B라는 가상의 블럭이 형제 관계로 존재한다고 가정합니다. A라는 상자의 수직 마진이 100px 이고 B라는 상자의 수직 마진이 50px 이라 칩시다. 상식적으로 계산하면 A라는 상자와 B라는 상자 사이에는 150px의 마진이 존재해야 하는데 그렇지 않다는 것이죠. 50px과 100px 가운데 100px이 더 크기 때문에 A의 아래쪽 마진인 100px만 적용이 됩니다. B는 위쪽 마진을 포기한 것이구요. 이게 형제간 마진 통합의 예 입니다.

.P { margin:50px 0; }
.C { margin:100px 0; }

다음은 부모 자식간의 마진 통합 입니다. P라는 부모와 C라는 자식이 존재한다고 가정합시다. 부모인 P는 수직 마진이 50px 입니다. 자식인 C는 수직 마진이 100px 입니다. 그렇다면 P와 형제 관계에 있는(C에게는 삼촌뻘) 녀석들은 P와 얼마나 멀리 떨어져 있어야 할까요? 일단 정답은 상황에 따라 다르다 인데 P 요소가 수직 방향으로 padding, border가 존재하지 않는다면 P는 형제들과 수직 방행으로 100px 떨어지게 됩니다. 왜냐하면 부모와 자식 사에에 padding, border가 존재하지 않기 때문에 수직 마진이 통합되어 버린 것입니다. 자식의 마진 100px이 더 크기 때문에 부모는 50px의 마진을 버린 것이죠. 이런 현상을 부모 자식간의 마진 통합이라고 합니다. 만약 부모 P 요소의 수직 방향(상하)에 마진 통합을 방해하는 padding, border가 존재한다면 마진 통합 현상은 발생하지 않을 것입니다.

마진 통합이 양수끼리 또는 음수끼리 통합될 때에는 계산하기가 쉽습니다. 양수든 음수든 더 큰 절대값(100px > 50px | -100px > -50px)을 지닌 마진이 적용이 되니까요. 그러나 양수와 음수값이 서로 만나게 되는 경우 절대값은 의미가 없고 그대로 샘을 해서 계산하면 됩니다. 예를 들어 100px 마진과 -200px 마진이 만나면 -100px의 마진이 남습니다. 양수 마진과 음수 마진이 만났을 땐 그냥 이렇게 100-200= -100 계산해 버리시면 돼요.

왜 이렇게 했는지 곰곰히 생각해 보면 통합하지 않는 것보다 훨씬 효과적이라는 것을 깨닫게 되실껍니다. hx 요소는 기본적으로 수직 마진이 좀 크고 p 요소는 좀 작지요. 이 두 요소가 형제 관계로 만났을 때 마진이 통합되어 버리지 않으면 엄청 큰 마진이 생기게 됩니다. 따라서 마진은 무조건 더하지 않고 큰 값 하나만 유효하다 라는 원칙으로 하여금 다양한 요소들이 부모 자식 또는 형제 관계로 만나게 되는 경우에 자연스러운 마진을 가질 수 있게 됩니다.

지금 설명드린 내용은 모두 CSS 표준 명세에 따른 것입니다. 이렇게 렌더링 하지 않는 브라우저들은 표준 스펙을 제대로 구현하지 못한 것입니다. float된 요소와 float되지 않는 요소는 서로 다른 층에 떠 있기 때문에 마진 통합 현상이 발생하지 않습니다.

 

[요약]
마진 통합 현상이란?
; 인접한 블록 레벨 엘리먼트의 margin-top과 margin-bottom 간의 마진이 합쳐지는 현상.

- margin-top, margin-bottom 의 값이 같을 경우 위에 먼저 마크업 된 블록 레벨 엘리먼트의 마진값
   (위의 블록 엘리먼트의 margin-bottom)에 합쳐진다.

- 블록 레벨 엘리먼트에 포함된 블록 레벨 엘리먼트의 마진통합현상
   - 부모 엘리먼트에 컨텐트(텍스트, 이미지)가 없는 경우에 일어난다. 부모 엘리먼트의 마진 영역에 통합된다.
   - 부모 엘리먼트에 컨텐트가 있는 경우는 일어나지 않는다.
   - border나 padding이 적용된 경우 마진이 통합현상이 일어나지 않는다.