출처
생활코딩 - 마진겹침 현상
MDN - Mastering margin collapsing
W3C Recommendation - Collapsing margins
FreeCodeCamp - How to Avoid Margin Collapse
Josh Comeau - The Rules of Margin Collapse
1. Margin collapsing이란?
블록 요소들의 위아래 margin이 하나의 단일 margin으로 합쳐지는 것을 말한다.
MDN 자료를 확인해보면 해당 현상이 발생하는 경우는 세 가지라고 한다.
- 수직 방향일 경우에만 (margin-top, margin-bottom) 적용된다.
- flex와 grid를 적용한 컨테이너 요소와는 발생하지 않는다.
1-1. Adjacent siblings
인접한 두 형제 요소 간 margin이 겹치는 현상이다.
위쪽 box 블록 요소에서는 아래 여백으로 20을 주고, 아래 sibling 블록 요소에서는 위 여백으로 30을 줘서 총 50px의 여백을 갖을거라 예상되지만 실제로는 둘 중 큰 값인 30px을 여백으로 갖게 된다.
겹치는 margin 중에 음수가 있을 경우 겹쳐지는 여백 중에 가장 큰 양수 값과 가장 작은 음수값이 더해진 margin으로 결정된다.
만약 둘 다 음수일 경우 둘 중 더 적은(절대값이 큰 음수)가 적용된다.
1-2. No content separating parent and descendants
부모와 자식 요소 사이를 구분할 수 있는 컨텐츠가 없을 때 margin이 겹치는 현상이다.
첫 번째 예시의 경우 parent 블록과 child 블록의 위 테두리가 겹친다. 이 때는 위쪽 여백을 주면 둘 중 더 큰 값인 20px만 적용된다.
하지만 아래 예시의 경우 두 블록 요소 사이에 텍스트 노드가 존재하여 두 블록이 구분되고, 이 때는 의도한대로 동작한다.
1-3. Empty blocks
border, padding, 인라인 요소, height과 같이 블록 요소의 위쪽 여백과 아래 여백을 분리할 요소가 없으면 위, 아래 여백은 겹쳐진다.
2. margin collapsing이 발생하지 않는 경우
- display: flex인 컨테이너를 사용하는 경우
- display: grid인 컨테이너를 사용하는 경우
- float를 통해 요소를 배치하는 경우
- position: absolute를 통해 요소를 배치하는 경우
- 형제 요소 관계
3. 해결책
- margin 대신 padding을 주어 형제 요소들 간 간격을 띄워준다.
- flexbox, grid와 같은 레이아웃 방식을 사용하여 요소 간의 간격을 제어한다 (gap 어트리뷰트 사용)
