Margin Collapsing 이란?
여러 요소의 위 아래 마진은 가장 큰 마진 값을 가지는 요소의 마진에 합쳐지는 경우가 종종 생기는데, 이를 Margin Collapsing 이라고 한다.
Margin Collapsing 은 언제 일어날까?
- floating 이나 absolute position 의 요소들은 절대 Margin Collapsing 이 생기지 않는다.
- 인접 형제 요소
인접한 형제 요소의 마진은 합쳐진다.
- 부모와 자손을 분리하는 컨텐츠가 없을 때
부모 블록에 border, padding, inline part 가 없고, block formatting context 생성되지 않았으며, 부모의 margin-top 을 자손의 margin-top 과 분리할 clearance 가 없는 경우
(= 부모 요소와 최 상단 자식 요소의 상단 마진이 겹칠 때)
또는
부모 요소에 border, padding, inline content가 없고, 부모의 margin-bottom 과 자손의 margin-bottom 을 분리할 높이, 최소 높이, 최대 높이가 존재하지 않는 경우 부모와 자손의 마진이 합쳐진다.
(= 부모 요소와 최 하단 자식 요소의 하단 마진이 겹칠 때)
합쳐진 마진은 부모 블록 바깥에 위치한다.
- 빈 요소
border, padding, inline content 이 없고, margin-top 과 margin-bottom을 나눌 height, min-height이 없는 경우 위 아래의 마진이 합쳐진다.
