[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

• Margin-collapsing 이해하기
• Mastering margin collapsing | MDN
• Collapsing margins | W3C Recommendation
• Wanted: CSS grid system AND collapsing margins | Stack Overflow