[2022.04.03] CSS margin collapsing

REASON·2022년 4월 3일

CSS collapse margin margincollapsing

STUDY

목록 보기

4/127

margin이 결합(상쇄)되는 현상을 margin collapsing이라고 한다.

MDN 문서를 참고하여 정리하였다.

margin collapse가 나타나는 상황

인접 형제
부모와 자식의 마진이 겹칠 때
높이가 0인 빈 블록(block)의 상하 마진이 겹칠 때

1. 인접 형제

인접 형제라는 말이 솔직히 마음에 들지는 않는다. 틀린 말은 아니지만, 초보자가 알아듣기 애매한 번역이라서 처음에 공부할 때 말이 어려워서 힘들었다. 😥 그냥 같은 레벨에 가까이 있는 (바로 다음에 있는) 요소를 의미한다.

margin collasing 확인을 위해 부모 박스와 자식 박스 test, 자식 박스 test2 를 만들었다.

<body>
    <div class="bg-container">
        <p class="items item1">margin test</p>
        <p class="items item2">margin test2</p>
    </div>
</body>

여기에서는 item1을 기준으로 보면 item2가 인접 형제가 되는 것이다.
item1과 item2에 각각 margin을 줘보도록 하자.

.item1 {
    background: #c5ccfa;
    margin-bottom: 10px;
}

.item2 {
    background: #7592d6;
    margin-top: 10px;
}

위 코드와 같이 item1에는 margin-bottom으로 10px을 주었고 item2에는 margin-top을 10px 주었다.
이론 상으로는 item1과 item2의 간격은 20px이 될 것 같지만 결과는 그렇지 않았다.
margin이 겹쳐져 10px만 적용된 모습이다. margin collapsing 현상이 일어나서 두 가지의 margin중 한 가지만 적용되었다. 예시로는 동일한 마진 값을 주었지만 동일한 마진 값이 아니라 한쪽이 더 큰 마진 값을 가지고 있었다면 더 큰 마진 값 하나만 적용된다. (css 상으로는 둘 다 마진을 가진것 처럼 나오지만 보이는 렌더링 결과는 그렇지 않다.)

2. 부모와 자식의 마진이 겹칠 때

부모와 자식의 마진이 겹치는 경우에도 margin-collapsing이 일어난다.
일단, margin-collpasing이 일어나려면 부모 블록 요소에 border, padding, inline 콘텐츠가 없어야 한다. 즉, 부모와 자식의 상단 또는 하단 위치가 딱 붙어있는 경우를 의미한다.
부모 박스 하나와 자식 박스 하나를 준비해보았다.

.bg-container {
    background: #d4e9ff;
}

.item1 {
    background: #7592d6;
}

그 다음, 자식 박스 item1에 margin-top으로 10px을 적용해 보았다. 예상으로는 부모 박스(bg-container)에 상단 여백이 10px 만큼 남을 것이라고 생각할 것이다.
예상하는 결과물은 위 사진과 같다. 부모 박스 안에 있는 'margin test'라고 쓰여있는 박스 위에 margin-top이 10px만큼 생기는 것이다.
예상과는 달리 결과물은 부모 박스에 margin-top을 적용된 것처럼 렌더링되었다. (실제 부모 박스 css margin-top이 추가되는 것은 아니다.)
부모와 자식이 겹쳐있을 때 나타나는 margin-collapsing 현상이다.
예시로는 상단 마진을 들었는데, 하단 마진도 이와 동일하게 적용된다.

3. 높이가 0인 빈 블록(block)의 상하 마진이 겹칠 때

<div class="bg-container">
        <div style="margin-bottom:10px;"></div>
        <div style="margin-top:10px;"></div>
        <div style="margin-bottom:10px;"></div>
        <div style="margin-top:10px;"></div>
        <div>margin collapse</div>
</div>

빈 div 박스 여러개에 margin-top 또는 margin-bottom값을 10px씩 주었다. <div>margin collapse</div> 위에는 단순 계산하여 40px정도의 여백이 생기지 않을까?하는 추측을 해볼 수 있을것이다.
결과는 margin-collpasing현상으로 인해 10px만 적용되었다.