CSS - Margin 병합

margin 병합

인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것

- margin 병합이 일어나는 경우

- 두 요소가 상하로 인접한 경우

위 요소의 하단 마진과 아래 요소의 상단 마진의 병합

- 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소

• 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합
• 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진의 병합

- 내용이 없는 빈 요소의 경우

• 해당 요소의 상단 마진과 하단 마진의 병합

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음

마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2, 3번째의 경우 패딩 및 보더가 없어야 함

마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용

마진 병합은 절대 위치나 상대 위치가 주어진 요소들에서는 발생하지 않음(position, float등)