블록요소들끼리의 margin collaspe (마진 겹침) 현상이 발생하는 이유

1. margin collapse란?

HTML에서 블록 요소(예: <div>, <p>, <h1> 등)는 위아래로 쌓이면서 페이지를 구성합니다.
이때, 두 블록 요소가 만나면 위쪽 margin과 아래쪽 margin이 합쳐지지 않고, 더 큰 값 하나만 적용됩니다.
이 현상을 **margin collapse (마진 겹침)**이라고 합니다.

 

예시:

<p style="margin-bottom:20px;">첫 번째</p> 
<p style="margin-top:30px;">두 번째</p>

👉 두 요소 사이의 간격은 20px + 30px = 50px이 아니라, 30px만 적용됩니다.

 

---

2. 왜 이런 규칙이 생겼을까?

CSS는 "문서 레이아웃을 단순화"하기 위해 이런 규칙을 만들었어요.
만약 margin을 다 더한다면, 문단(p)마다 기본 margin이 있어서 줄 간격이 불필요하게 과도하게 넓어질 수 있습니다.
따라서 겹치는 margin은 가장 큰 값만 남기자는 규칙이 도입된 거죠.

---

3. 왜 수직에서만 일어날까?

(1) 블록 요소의 흐름 방향

• 블록 요소의 기본 배치 방향은 **위 → 아래 (수직)**입니다.
• 따라서 브라우저는 세로로만 margin collapse 규칙을 적용하도록 설계했습니다.

(2) 수평에서는 collapse 불가

• 블록 요소는 가로 공간을 한 줄 전체 차지하기 때문에, 기본적으로 옆에 다른 블록이 오지 않습니다.
• 즉, 수평 방향에서는 margin이 “겹쳐질” 상황 자체가 잘 생기지 않아요.
• 수평 배치를 하고 싶다면 flex, grid, inline-block 같은 별도의 레이아웃 방식을 사용해야 하는데, 이 경우 margin은 단순히 더해지는 효과만 납니다.

---

4. 추가적인 특징

• 부모와 자식 사이에서도 margin collapse가 발생할 수 있습니다. (자식의 margin-top이 부모 바깥으로 튀어나오는 경우)
• 빈 블록 요소의 위/아래 margin도 collapse 규칙이 적용됩니다.

---

5. 비유

• 세로 방향: 책에서 문단 간격을 생각하면, 위 문단이 20px, 아래 문단이 30px이면 굳이 50px 떨어질 필요가 없으니까, 더 큰 30px만 남기는 거예요.
• 가로 방향: 블록은 원래 가로줄 전체를 차지하므로, 옆으로 margin을 겹쳐볼 기회가 없어요.

---

👉 요약:

• margin collapse는 세로 방향에서만 발생한다.
• 이는 문서 레이아웃을 단순하게 하고, 불필요한 여백 누적을 방지하기 위한 CSS 설계 철학 때문이다.
• 수평 방향은 블록이 원래 나란히 놓이지 않으므로 collapse가 일어나지 않는다.