[Box model] margin 중복

마진 중복(병합)

마진의 특정 값들이 '중복'되어 합쳐지는 현상.

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

 

• 형제 요소들의 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

 

본래 마진은 위와 같이 더해지는 형태이다.

 

형제요소의 margin-top과 margin-bottom이 만났을 때

부모요소의 margin-top과 자식요소의 margin-top이 만났을 떄