9.4 마진 겹침 현상 (Margin collapsing)

마진이 특정 값 보다 클 경우 두 요소의 마진 영역이 겹치는 현상

마진 겹침 현상이 발생하는 경우

두 개의 인접한 태그 (sibling) 사이에서 발생
- 두 element의 마진 값 중에 작은 값이 상쇄되어 큰 값이 두 element 사이의 간격이 된다.
- <li> 등에 margin을 적용시켰을 때 등간격을 유지할 수 있게 해준다.
부모 - 자식 태그 사이에서 발생
- 부모 태그의 시각적 효과를 주는 요인이 없는 경우에만 발생한다. (e.g border, background, 블록 안의 텍스트 등)
- 부모 - 자식 태그의 마진값 중 더 큰 값이 자식 element의 마진값으로 적용
빈 element에서 발생 (시각적 효과를 주는 요인이 없는 element)
- margin-top과 margin-bottom중 큰 값만 해당 태그의 마진값으로 적용됨

2020.04.28 20:54 작성