마진 겹침 현상 이해하기

마진 겹침(Margin Collapse) 현상 완전 이해

1. 형제 요소 간 마진 겹침

첫 번째 박스 (margin-bottom: 30px)

📐 아래쪽 마진: 30px

두 번째 박스 (margin-top: 20px)

📐 위쪽 마진: 20px

실제 간격: 30px (30px + 20px = 50px가 아님!)

마진 겹침 규칙: 인접한 블록 요소들의 수직 마진은 더 큰 값으로 합쳐집니다.

.first-box { margin-bottom: 30px; } .second-box { margin-top: 20px; } /* 결과: max(30px, 20px) = 30px */

2. 부모-자식 간 마진 겹침 (문제 상황)

부모 요소 (margin-top: 20px, padding/border 없음)

자식 요소 (margin-top: 30px)

🚨 문제: 자식의 margin-top이 부모 밖으로 "전달"됨!

부모에 padding이나 border가 없으면, 자식의 margin-top이 부모의 margin-top과 겹쳐서 부모 요소 위쪽에 30px 마진이 생성됩니다.

.parent { margin-top: 20px; } /* padding, border 없음 */ .child { margin-top: 30px; } /* 결과: 부모 위에 max(20px, 30px) = 30px 마진 */

3. 부모-자식 간 마진 겹침 해결

부모 요소 (padding-top: 1px 추가)

자식 요소 (margin-top: 30px)

✅ 해결: padding 1px만 추가해도 마진 겹침 방지!

부모에 padding, border, 또는 다른 블록 포맷팅 컨텍스트를 만드는 속성이 있으면 마진 겹침이 발생하지 않습니다.

.parent { margin-top: 20px; padding-top: 1px; /* 마진 겹침 방지 */ } .child { margin-top: 30px; } /* 결과: 부모 위 20px + 자식 위 30px = 정상 동작 */

4. 빈 블록 요소의 마진 겹침

이전 요소 (margin-bottom: 25px)

이후 요소 (margin-top: 20px)

복잡한 겹침: 빈 요소의 위아래 마진도 겹침

빈 블록 요소는 자신의 margin-top과 margin-bottom도 겹치고, 주변 요소들과도 겹칩니다.

/* 계산 과정 */ .before { margin-bottom: 25px; } .empty { margin-top: 15px; margin-bottom: 35px; } .after { margin-top: 20px; } /* 결과: max(25px, 15px, 35px, 20px) = 35px */

5. 마진 겹침 방지: Flexbox 활용

첫 번째 박스

두 번째 박스

세 번째 박스

✨ 현대적 해결책: Flexbox + gap

Flexbox나 Grid 컨테이너에서는 마진 겹침이 발생하지 않습니다. gap 속성으로 일정한 간격을 유지할 수 있습니다.

.container { display: flex; flex-direction: column; gap: 20px; /* 항상 정확히 20px 간격 */ }

🎯 마진 겹침 핵심 정리

수직 마진만 겹침 (좌우 마진은 겹치지 않음)
블록 요소만 겹침 (인라인 요소는 겹치지 않음)
더 큰 값으로 합쳐짐 (더하지 않음)
부모에 padding, border, overflow: hidden 등이 있으면 방지
display: flex나 display: grid에서는 발생하지 않음