[CSS] 마진 상쇄

CSS에서 **세로 마진(margin-top, margin-bottom)**은
서로 겹칠 경우 더해지지 않고 하나로 합쳐지는 규칙을 가집니다.
이를 **마진 상쇄(Margin Collapsing)**라고 합니다.

 

결과적으로 겹친 마진 중 가장 큰 값 하나만 적용됩니다.

 

1. 마진 상쇄가 적용되는 기본 규칙

• 세로 방향만 적용됨 (위·아래)
• 가로 마진은 상쇄 ❌
• block 요소에서 발생
• 형제 요소, 부모-자식 관계 모두 가능

 

2. 서로 이웃한 태그 (형제 요소)

<div id="a">a</div>
<div id="b">b</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

결과

• #a의 아래 마진: 30px
• #b의 위 마진: 20px

👉 30px + 20px ❌
👉 둘 중 큰 값인 30px ⭕

 

즉, 두 요소 사이의 실제 간격은 30px입니다.

 

3. 부모-자식 태그 관계

<div id="a">a</div>

<div id="b">
  <div id="c">c</div>
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

 

1️⃣ 부모(#b)와 자식(#c) 마진 상쇄

• #b에 padding / border가 없음
• 자식 #c의 margin-top: 40px

👉 자식의 마진이 부모 바깥으로 튀어나와
부모의 위 마진처럼 동작

즉, #b의 위쪽 여백은 40px처럼 보입니다.

 

2️⃣ 이웃 요소(#a)와의 관계

• #a의 margin: 30px
• #b(실제로는 #c에서 올라온) margin: 40px

👉 둘이 겹치면서
30px + 40px ❌ → 40px ⭕

 

4. 마진 상쇄를 막는 방법

 

1️⃣ 부모에 padding 추가

.parent {
  padding-top: 1px;
}

 

2️⃣ 부모에 border 추가

.parent {
  border-top: 1px solid transparent;
}

 

3️⃣ overflow 사용

.parent {
  overflow: hidden;
}

 

4️⃣ flex / grid 사용 (실무 최선)

.parent {
  display: flex;
  flex-direction: column;
}

 

 

 

정리하면

 

마진 상쇄란
세로로 인접한 요소들의 마진이 합쳐져
가장 큰 값 하나만 적용되는 CSS 규칙이다.
특히 부모-자식 관계에서는 마진이 밖으로 튀어나올 수 있어 주의해야 한다.

 

※ padding·border는 부모–자식 관계에서만 마진 상쇄를 막고, 형제 요소 간 마진 상쇄에는 영향을 주지 않는다.