작성일 : 2025.07.09.(수)
작성자 : 이참
동기 : CSS를 복습하던 중, margin collapsing(마진 겹침) 현상이 수직방향으로만 발생하고, 수평방향으로는 발생하지 않는다는 것을 알게 되었다. 이에 대해 의문을 품었고, 조금 더 알아본 결과 레이아웃 모델 설계 원칙 등에 대해 더욱 잘 알게 되었다. 필자와 같이 해당 내용에 의문을 품고 있을 사람들을 위해 해당 내용을 공유하고자 한다.
이번 시간에는 CSS를 배운 사람들이라면 한 번쯤은 들어봤을 Margin Collaping에 대해 다뤄보고자 한다.
기본적으로 Margin Collapsing은 인접한 형제 요소간의 상하 Margin이 겹칠 때, 빈 요소의 상하 Margin 이 겹칠 때, 부모요소의 top(bottom) margin과 첫번째(마지막)자식 요소의 top(bottom) margin이 겹칠 때 발생한다.
간단히 말해 요소 사이에 margin-top과 margin-bottom이 겹칠 경우, 더 높은 값의 margin이 적용되는 현상을 일러 말한다.
아래는 인접한 형제 요소간의 Margin Collapsing이 일어난 사례로, 코드 및 inspector를 통해 확인해볼 수 있다.
<style>
.box {
width: 100px;
height: 200px;
border: 2px dashed green;
padding: 10px 20px;
margin: 20px;
background-color: orange;
}
</style>
<div style="background-color:rgba(255,3,4,0">
<div class="box"></div>
</div>
<div class="box"></div>Margin Collapsing을 방지하기 위해서는 부모 요소에 overflow: hidden 을 적용하거나, display : flex 또는 display : grid 등을 적용할 수 있는데, 이에 대해서는 다음 시간에 더욱 자세히 다뤄보도록 하겠다.
각설하고, 이 현상은 수직 방향 요소들 사이에서만 일어나는데 그 이유가 뭘까하는 의문을 품게 되었다. 이는 레이아웃 모델 설계 원칙과 관련이 있는데, 이에 대해 함께 알아보도록 하자.
1. HTML 문서는 기본적으로 탑다운(수직) 방향으로 블록 요소들이 쌓인다.
HTML로 문서를 작성할 때, block-flow의 기본 방향은 세로(수직)방향이다. 이는 MDN에 CSS 규격으로 정의되어있으며 이러한 흐름을 `normal block flow` 또는 `block formatting context` 라고 칭한다.따라서 이러한 구조를 따랐을 때, 세로 방향 margin이 겹치면 자연스럽게 레이어 압축 효과를 낼 수 있다. 예를 들어 다음과 같은 문서 구조가 있다고 가정하자.
<p style="margin-bottom: 30px;">첫 번째 문장</p>
<p style="margin-top: 20px;">두 번째 문장</p>normal block flow에서는 이 두 블록 사이에 마진이 겹쳐 30px로만 적용이 된다. 이런 현상은 불필요하게 마진이 중복 적용되는 것을 방지할 수 있다는 점에서 문서의 흐름을 단순화할 수 있다.
2. 수평 방향은 레이아웃 충돌 우려가 있기에 Margin Collapsing이 발생하지 않도록 설계되었다.
좌우에는 inline, flex, float 등의 다양한 레이아웃 방법들이 있고 overflow나 줄바꿈 등 복잡한 요소가 많기에, 수평 방향으로 margin을 겹치게 하면 각 요소 간 간격 계산하는 것이 매우 혼란스러워질 수 있다.
따라서 CSS에서는 가로 방향으로는 margin이 명시적으로 더해지도록 설계되었다.
3. 개발자 입장에서 예측 가능하다.
세로 마진 겹침은 수직 방향의 흐름을 최적화한다는 점에서 일관된 규칙이 있지만, 가로 마진까지 겹치게 되면 레이아웃이 복잡해지며 계산이 복잡하고 예측이 어려워질 우려가 있다.
따라서 CSS는 세로 방향에서만 margin collapsing이 가능하도록 설계되어있다.
즉, 복잡함을 최소화 하는 선에서 레이아웃을 최적화 하기 위한 방법 중 하나가 Margin Collapsing이라는 결론을 얻을 수 있다.
더 나아가, CSS3 이후로는
flex나grid등에서는 세로방향의 마진 겹침도 방지되어있어 더욱 예측하기 쉬운 레이아웃 구조를 설계할 수 있다고 한다.
CSS 작업을 하며 가장 어려움을 겪었던 부분이자 존재의 이유를 몰랐던 현상인데, 이번 기회를 통해 납득할만한 이유를 찾은 것 같아서 좋다. 다음 시간에는 이러한 margin collapsing 문제를 해결할 수 있는 방법과 flex 및 grid 등에 대해서도 더 알아보고, 탄탄한 레이아웃을 짤 수 있는 지식을 쌓아야겠다.
