[CSS] 마진 겹침 현상(Margin-Collapsing)

마진 겹침 현상이란?

인접한 마진이 상쇄되는 현상을 말한다.

블록 요소에 한해서 좌우 방향은 적용되지 않고 오직 수직방향으로만 적용되며, 마진값이 0이더라도 상쇄 규칙은 적용된다. 또한 좌우 마진은 겹치더라도 상쇄되지 않는다.

이는 아래의 경우처럼 3가지 상황에서 발생한다.

1. 형제 박스요소 간에 상하 마진이 겹칠 때

<div class="d1"></div>
<div class="d2"></div>

div {
    background-color: tomato;
    width: 100px;
    height: 100px;
}
.d1 {
    margin-bottom: 60px;
}
.d2 {
    margin-top: 30px;
}

 

위와 같을 때, 생각대로라면 d1과 d2에 각각 margin-bottom과 margin-top을 주었으니 전체 margin이 90px이 되어야 할 것같지만 그렇지 않다.

 

형제 블록요소간에 상하 마진이 겹칠 경우 아래 그림과 같이 마진 상쇄에 의해 둘 중에 더 큰 마진값이 적용된다. (둘의 상하 마진값이 같은 경우에는 하나만 적용된다.)

 

2. 빈 요소의 상하 마진이 겹칠 때

빈 요소는 높이가 0인 상태의 블록 요소를 말한다.

- height, min-height, border, padding 등의 프로퍼티 값을 명시하지 않은 경우

- 내부에 inline 콘텐츠가 존재하지 않는 경우

 

.d1 {
    margin-top: 60px;
}
.d2 {
    margin-top: 30px;
    width: 100px;
    height: 100px;
}

 

빈 요소는 위와 아래를 가르는 경계가 없기 때문에 자신의 상단 마진값과 하단 마진값을 비교해 더 큰 값으로 상쇄한다.

 

div 두개가 있고 위와 같이 CSS 속성을 지정해주었다고 할 때(d1은 빈 요소), 마진 겹침 현상이 일어나 60px과 30px 중 더 큰 값인 60px의 마진값만 적용이 된다.

 

 

또 특히 빈 요소와 인접 박스들 간에 마진 겹침이 일어나는 구조에서는 아래와 같이 상쇄가 여러 번 발생하기도 한다.

 

이를 해결하기 위해서는 빈 엘리먼트에 height, min-height, border, padding을 주거나 inline 컨텐츠를 추가해주면 된다.

3. 부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때

부모 박스와 첫 번째 자식 박스의 상단 마진이 겹치거나, 부모 박스와 마지막 자식 박스의 하단 마진이 겹치는 경우에도 마진 상쇄가 발생한다.

 

브라우저는 부모 박스와 첫 번째(마지막) 자식 박스 간의 경계를 그 사이에 있는 border, padding, inline 컨텐츠 유무로 판단한다. 이는 두 번째 경우와는 다르게 height나 min-height 값을 주었더라도 그렇다.

 

따라서 부모와 첫 번째(마지막) 자식 사이에 inline 컨텐츠가 없거나, 상단(하단)에 명시적으로 padding이나 border 값을 주지 않았다면 마진이 겹치게 된다. 이 때 자식 요소의 마진이 더 크거나 작은 것에 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링된다.

 

첫 번째 자식 박스의 상단 마진이 겹치는 경우, 마지막 자식 박스의 하단 마진이 겹치는 경우 같은 원리로 마진 겹침 현상이 발생하기 때문에 상단이 겹치는 경우만 설명하겠다.

 

부모의 마진값이 첫 번째 자식의 마진값 보다 클 경우, 큰 마진값만 적용되므로 margin 60만 적용된다.

 

 

부모 마진값보다 첫 번째 자식의 마진값이 더 클 경우 그 마진값이 적용되고, 부모 자식간의 마진 상쇄의 경우 부모 박스의 바깥쪽으로만 렌더링되기 때문에 자식의 마진값이지만 부모 박스의 바깥쪽에 적용된다.

 

 

둘의 마진값이 같을 경우 하나만 적용이 된다.

 

따라서 padding이나 border값을 추가해주어 경계를 만들어주는 것이 이와 같은 현상을 방지하는 방법이다. 이렇게 하면 의도대로 배치할 수 있다.

 

마진 상쇄 규칙 예외

다음과 같은 상황에서는 마진 상쇄 규칙이 적용되지 않는다.

• 박스가 position: absolute일 때
• 박스가 float: left(right)된 상태 (단, clear되지 않은 상태)
• 박스가 display: flex일 때 내부 flexbox item
• 박스가 display: grid일 때 내부 grid item

참고

• CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
• CSS 마진(여백) 상쇄