배경지식
마진값을 주었는데 적용이 되지 않거나 엉뚱한 요소에 적용이 같이 되는 경우가 있는데 이를 마진겹침(Margin Collapsing), 마진병합 또는 마진상쇄 현상이라고 합니다.
가령 main 요소 자식으로 h1이 있을 경우 h1에 마진을 적용하면 main요소에 같이 적용되는 현상이죠.
이런 현상은 버그나 잘못된 해석이 아닌 CSS 본연의 기본 스펙으로 규정되어 있습니다.
이유는 HTML 문서와 CSS 디자인의 견해차이
마진겹침이 정식스펙으로 지정이 된 이유는 HTML문서로서의 사용성을 먼저 두고 있기 때문입니다.
현대에 이르러서야 CSS로 복잡한 디자인도 무리없이 가능하지만 인터넷 초창기에는 레이아웃이 화려한 디자인이 아닌 문서적인 레이아웃설정을 다루는데 초점이 맞춰져 있었습니다.
가령 문장 사이 간격을 10px로 둔다고 했을 때 양쪽의 마진을 고려하여 반만 주는 것이 아닌 문장의 간격이 정말 10px이라는 개념이 우선시 되면서 양쪽의 마진을 병합하여 처리하는 개념을 채용하고 있습니다.
이러한 개념은 CSS 설계 원칙으로도 정의되면서 일관성과 예측 가능성이라는 명목으로 스펙이 정의 되어 있습니다.
그럼 언제 마진 겹침이 생기나?
- 인접한 형제 요소의 위/아래 마진
인접한 형제 요소 사이의 마진이 겹치는 경우, 두 요소의 마진이 합쳐지게 되어 예상치 못한 간격이 생성될 수 있습니다. - 부모 요소와 첫 번째 또는 마지막 자식 요소의 위/아래 마진
부모 요소의 위쪽 마진과 첫 번째 자식 요소의 위쪽 마진 또는 부모 요소의 아래쪽 마진과 마지막 자식 요소의 아래쪽 마진이 겹치는 경우, 마진이 합쳐질 수 있습니다. - 빈 블록 요소의 위/아래 마진
내용이 없는 블록 요소의 위쪽 마진과 아래쪽 마진이 겹치는 경우, 마진이 합쳐질 수 있습니다.
이러한 상황에서 마진 겹침이 발생하면, 겹치는 마진 중에서 가장 큰 마진 값만 적용됩니다.
다시 말해, 겹치는 마진 중에서 가장 큰 양수 혹은 가장 작은 음수 마진 값이 적용되며, 다른 마진 값은 무시됩니다.
마진 겹침은 웹 페이지의 레이아웃을 예측하고 조정하는 데 영향을 줄 수 있으므로, 이러한 동작을 고려하여 CSS를 작성하는 것이 중요합니다.
마진 겹침을 방지하거나 조절하기 위해 다음과 같은 방법을 사용할 수 있습니다:
마진겹침을 방지하는 방법은?
overflow: auto또는overflow: hidden을 부모 요소에 적용하여 마진 겹침을 방지합니다.(추천)- 부모 요소와 자식 요소 사이에 빈 요소를 추가하여 마진 겹침을 방지합니다.
- 투명선을 넣음으로 마진영역을 분리시켜 마진겹침을 방지합니다.
padding값을 사용하여 마진 겹침을 방지합니다. (추천)float속성이나inline-block속성을 사용하여 요소간 인라인 간격으로 마진 겹침을 방지합니다.clear속성을 사용하여 이전 요소의 마진 겹침을 방지합니다. 가상요소를 활용하면 더 깔끔해지겠죠.display: flex또는display: grid속성을 부모 요소에 적용하여 마진 겹침을 방지합니다.position: absolute또는position: fixed속성을 사용하여 요소를 절대 위치로 배치하여 마진 겹침을 피합니다.margin속성에 음수 값을 사용하여 겹치는 마진을 재 조정합니다.
마진 겹침은 웹 페이지의 레이아웃을 다룰 때 고려해야 할 중요한 요소입니다. 따라서 요소들 사이에 의도하지 않은 간격이 발생하지 않도록 마진 겹침을 적절하게 조절하는 것이 필요합니다.