margin 中 - 마진 중복

마진 중복(collapse)

• 마진의 특정 값들이 '중복'되어 합쳐지는 현상
• 마진 중복 상황
  • 형제 요소들의 margin-top과 margin-bottom이 만났을 때
  • 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
  • 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

마진 중복은 버그가 아니다. 이 현상을 우회하거나 응용할 수 있다!

마진 중복 계산법

• 마진 중복 발생 시, 중복 값을 계산 하는 방법

  조건	요소A 마진	요소B 마진	계산법	중복값
  둘 다 양수	30px	10px	더 큰 값으로 중복	30px
  둘 다 음수	-30px	-10px	더 작은 값으로 중복	-30px
  각각 양수와 음수	-30px	10px	-30+10=-20	-20px

• 중복값이 음수(-) 이면 두 요소가 겹치게 된다.