[CSS] 마진 병합(margin collapse) 정리

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

마진 병합은 다음 세가지의 경우에 일어난다.

1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합
2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
   1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합
   2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합
3. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 한다.

마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용된다.
마진 병합은 절대 위치나 상대 위치가 주어진 요소들에서는 발생하지 않는다.->(position, float를 지정한 경우)

1. margin병합이 일어나지 않음

    <div class="horizontal-container">
        <div class="first-box-1 green-box"></div>
        <div class="second-box-1 blue-box"></div>
    </div>

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

2. margin 병합이 일어남

   <div class="vertical-container">
        <div class="first-box-2 green-box"></div>
        <div class="second-box-2 blue-box"></div>
    </div>

요소가 상하로 인접한 경우, 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어난다.
제일 큰 여백의 크기를 가진 초록색 div의 40px로 병합된다.
(플로팅 요소와 절대 위치를 지정했을 경우 여백은 상쇄되지 않는다.)

3. 마진 병합이 일어나지 않음

 <div class="vertical-container">
        <div class="parent-3 green-box">
            <div class="child-3 blue-box"></div>
        </div>
    </div>

마진 병합은 마진이 반드시 맞닿아야 발생하며, padding과 margin의 경우는 마진 결합이 발생하지 않는다.

4. 마진 병합이 일어남

    <div class="vertical-container">
        <div class="parent-4 green-box">
            <div class="child-4 blue-box"></div>
        </div>
    </div>

부모의 margin-top을 자손의 margin-top과 분리할 권한이 없는 경우,

또는 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며
부모의 margin-bottom과 자손의 margin-bottom을 분리할 height, min-height, max-height가 존재하지 않는 경우,
부모와 자손의 마진 결합이 발생한다.
상쇄된 여백은 부모블록 바깥에 위치한다.

5. 마진 병합이 일어남

  <div class="vertical-container">
        <div class="parent-5 green-box">
            <div class="child-5 blue-box"></div>
        </div>
    </div>

부모요소의 상단 마진과 첫 번째 자식 요소의 상단 마진이 병합된다는 규칙과
두 마진 중 큰 값이 적용된다는 규칙이 합쳐져 부모 요소와 컨테이너 요소 사이에 40px 만큼의 간격이 생긴다.


https://www.boostcourse.org/cs120/lecture/92916
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Mastering margin collapsing - CSS: Cascading Style Sheets | MDN