[CSS] 마진 상쇄를 알아보자

마진 상쇄 (margin Collapsing)

보더(border)를 기준으로 경계선 내부를 패딩(padding), 외부를 마진(margin)이라고 한다.

마진과 패딩은 비슷하지만 서로 다른 두 요소를 위아래로 배치해서 마진을 사용할 때 마진의 특징이 보인다.

 

See the Pen margin by summermong (@summermong) on CodePen.

마진을 20px씩 줬는데 위 아래 블록 사이 마진은 40px이 아니라 20px이다.

이런 경우 마진이 서로 상쇄됐다고 할 수 있다.

 

See the Pen margin collapsing by summermong (@summermong) on CodePen.

아이디별로 마진을 나눠서 다시 줬다.

#top의 아래쪽 마진은 20px, #bottom의 위쪽 마진은 40px으로 수정했다.

이 때 보면 위아래로 맞닿은 요소 사이에 마진은 더 큰 쪽을 기준으로 결정된다는 걸 알 수 있다.

두 요소에 각각 마진을 적용하더라도, 서로 닿아 있는 경우 마진이 따로따로 존재하지 않는다는 것이다.

 

즉 마진 상쇄는 어떤 두 개 이상의 블록 요소들의 상하 마진이 겹칠 때 마진이 더 큰 쪽의 값을 정한다.

---

마진 상쇄는 어떤 경우에 일어나는가?

위의 경우처럼 인접한 형제 사이에서 상하 마진이 겹칠 때 외에도,

부모 자식의 상하 마진이 겹칠 때, 빈 요소의 상하 마진이 겹칠 때 마진 상쇄가 발생한다.

 

• 부모 자식의 상하 마진이 겹칠 때

See the Pen 부모 상쇄 by summermong (@summermong) on CodePen.

 

부모 요소와 첫 번째 자식 요소 사이에 어떤 인라인 콘텐츠(텍스트나 이미지)도 없고

부모 요소에 패딩이나 보더 값이 없을 경우 위 코드와 같이 자식 요소의 마진이 상쇄된다.

 

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

See the Pen 빈 요소 상쇄 by summermong (@summermong) on CodePen.

 

주로 높이가 0인 요소들이 서로 겹칠 때 발생한다.

마진이 겹치면 더 큰 값의 마진이 적용되기 때문에 상단, 하단에는 100px의 마진이 적용된다.

 

이 때 빈 요소란 height 뿐만 아니라 min-height, max-height, 패딩, 보더 등

요소의 크기가 상하로 늘어니는 프로퍼티 값이 없는 경우를 말한다.

---

마진 상쇄 조건

• 인접한 두 박스가 온전한 블록 요소일 경우에만 적용된다.
• 마진 값이 0이더라도 적용된다.
• 좌우 마진은 겹치더라도 상쇄되지 않는다.

마진 상쇄 제외 조건

• 박스에 position이 absolute일 때
• 박스가 float: left or right일 때 (단 clear 되지 않은 상태)
• 박스에 display: flex or grid일 때 내부의 flext item or grid item일 경우

마진 상쇄 벗어나기

1. 마진 상쇄 조건이 두 박스가 온전한 '블록' 요소일 경우이기 때문에 display: inline-block을 주면 된다. inline으로 해도 되지만 이렇게 하면 너비와 높이를 제어할 수 없으니 inline-block이 보편적이다. 단 이 경우 자식 요소에 존재하는 모든 마진 상쇄 현상이 사라지게 된다. (부모 요소에만 주고 싶다면 overflow: hidden을 줘야 한다. inline-block이 되면 부모 요소는 자식 요소의 크기에 의해 결정되는데 부모 요소가 자식 요소보다 클 경우 overflow를 주면 넘치는 부분이 잘라진다.)

 

2. 박스에 display: flex or grid를 준다. 단 레이아웃이 변동될 수 있다.

 

3. 부모 자식의 상하 마진이 겹칠 때 부모 자식 요소 사이에 보더나 패딩, 인라인 컨텐츠(span, a, img 등)를 주면 해결된다.

---

알면 알수록 CSS는 참으로 복잡하구나...

 

**참고

[CSS] 마진 상쇄(marign Collapsing)와 해결방법

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