margin-collapsing.md

마진 상쇄

인접한 블록 요소들의 상하 마진이 겹칠 때, 하나의 마진으로 합쳐지는 현상

• 인접한 두 박스가 block-level 요소일 경우에만 적용
• 상하 마진의 경우에만 적용
• 레이아웃을 간소화하고, 예상치 못한 마진 중복을 방지하기 위해 설계

마진 상쇄 발생 조건

1. 인접 형제 간

• 두 개의 블록 요소가 위아래로 배치되고, 그 사이에 다른 요소가 없을 때
• 상하 마진 중 더 큰 값으로 적용

2. 부모와 자식요소 간

• 부모와 자식요소의 마진이 동일한 방향으로 있을 때 두 마진이 겹쳐져 하나로 처리
• 자식 요소의 상하 마진이 부모 요소 밖으로 나가 상쇄

3. 빈 요소

• 빈 요소란 높이가 0인 상태의 블록 요소
• 내부 Inline 콘텐츠, border, padding, height, min-height, max-height 가 없으면 상쇄

마진 상쇄 예외

• position: absolute
• float: left / right
• display: flex
• display: grid