CSS 마진 상쇄(Margin collapsing) 이해하기
1. 마진 상쇄란?
Block 요소들의 상하 마진이 겹칠 때, 한 쪽의 마진 값만 적용하는 렌더링 규칙
2. 마진 상쇄가 일어나는 3가지 상황
1) 인접 형제간 겹침
마진이 더 큰 값 (≥) 으로 랜더링이 일어난다.
2) 빈 요소의 상하 마진간 겸침
빈 요소란?
- block 요소의 height이 0인 경우를 말함
- height, padding, border 상하로 늘어나는 프로퍼티 값이 없는 경우
- 내부에 inline 컨텐츠가 없는 경우
빈 요소 + 인접 박스들 간에 마진 겹침이 연쇄적으로 일어나는 경우, 상쇄가 여러번 일어난다.
마크업을 진행할 때, 빈 요소를 만들어놓는 상황이 있으니 꼭 인지해두자.
- 빠른 레이아웃 구성을 위해, div로 영역을 구분할 경우
- 나중에 append 하기 위해 빈 컨테이너를 만들어 놓을 경우
3) 부모, 자식간 겸침
마진은 콘텐츠 간의 간격을 의미한다. 간격을 벌리기 위해서는 경계가 필요한데, 그 경계는 부모 요소와 끝쪽에 위치한 상하 자식 요소 사이에 있는 border / padding / inline 콘텐츠 유무로 판단한다.
- 빈 요소의 마진 상쇄 현상과는 다르게, height 값과는 상관이 없다.
- 부모와 자식 사이에 경계가 없다면 마짐겹침 현상이 일어난다.
- 자식 요소의 마진 값과 상관없이, 상쇄된 마진은 부모 박스의 바깥으로만 렌더링된다.
부모 박스 상단(하단)에 padding 또는 border 값을 주어 경계를 만들면, 마진겹침 현상이 일어나지 않게된다.
마진 상쇄 규칙 적용
- 인접한 두 박스가 block-level 요소일 경우에만 적용
inline, inline-block, table-cell, table-caption ❌ - 마진 값이 0이더라도 상쇄 규칙은 적용
- 좌우 마진은 겹치더라도 상쇄되지 않음
마진 상쇄 규칙 예외
- 박스가 position: absolute
- 박스가 float: left/right 된 상태 (단, clear 되지 않은 상태)
- 박스가 display: flex 일 때 내부 flexbox item
- 박스가 display: grid 일 때 내부 grid item
Reference