[CSS] 마진 상쇄(겹침) 현상 (Margin Collapsing) 해결하기

 

작성한 코드 및 오류 내역

.itemDesc h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.itemDesc p {
  margin: 10px 0;
  font-size: 14px;
  color: #737373;
}

 

위 아래로 나란히 있는 h1과 p에게 각각 margin-bottom을 15px, margin top&bottom을 10px씩 부여했다.

 

 

 

 

그런데 작업한 화면을 검토해보니 코드에 작성한 margin값이 의도대로 적용되지 않고 있었다. 개발자도구로 확인해보니 h1과 p의 margin이 겹쳐져 있는 것을 확인할 수 있었다. 이유는 마진 상쇄(겹침) 현상 때문이었다.

 

 

 

마진 상쇄 현상이란?

마진 상쇄는 어떤 두 개 이상 블록 요소의 위 아래 마진이 겹칠 때, 어느 한쪽의 값만 적용하는 브라우저 나름의 렌더링 규칙이다.

 

 

마진 상쇄 현상이 일어나는 이유

1. 인접해있는 형제 블록 사이에서 위/아래 마진이 겹칠 때

인접해있는 형제 블록 두 마진 값을 비교해, 더 큰 마진 값으로 상쇄시킨다. 

 

 

 

코드를 작성한대로 마진이 적용되었다면, 위의 h1 아래쪽 마진 15px과 p의 위쪽 마진 10px을 더해 h1과 p 사이에는 25px의 마진이 적용되어야 한다.

 

 

 

하지만 마진 상쇄 현상으로 인해, 인접한 h1과 p 중 더 큰 마진 값인 15px로 두 마진 영역이 겹쳐져버리는 것이다.

 

 

 

2. 부모 요소와 첫/마지막 자식의 마진이 겹칠 때

부모 요소와 첫번째 자식의 위쪽 마진값 또는 또는 마지막 자식의 아래쪽 마진값이 겹칠 때도 위와 동일하다.

 

 

 

검은색 테두리의 #wrap 안에 parents 라는 div가 있고, 그 안에는 children이라는 div가 자식요소로 존재한다. 여기서 children div의 margin-top을 10px로 설정하면 우측의 output과 같이 위쪽에 10px만큼 여백이 생기는 것을 확인할 수 있다.

 

 

 

 

이때 children의 부모 div인 parents의 margin-top을 40px을 주면, children의 margin-top: 10px은 적용되지 않고 parents div의 margin-top: 40px이 적용되는 것을 확인할 수 있다. 두 요소 모두 같은 공간을 밀어내고 있으므로 두 마진 값을 비교해, 더 큰 마진값인 40px로 상쇄시킨 것이다.

 

 

 

3. 비어있는 요소(height가 0)의 위/아래 마진이 겹칠 때

레이아웃 구성을 위해 div로 영역을 만들어 놓거나, 내부에 요소를 append하기 위해 빈 컨테이너를 만들어놓을 경우 등의 상황에서 비어있는 요소를 만드는 경우가 생긴다. 이러한 빈 요소들과 인접한 요소들 간에 마진 겹침이 일어나는 경우 마진 상쇄가 발생한다.

 

 

 

마진 상쇄 현상 해결법

마진 상쇄는 인접한 두 요소가 block-level 요소일 경우에만 적용된다. 따라서 다음의 두 가지 방법으로 마진 상쇄를 해결할 수 있다.

 

 

1. display: inline-block을 적용한다.

이때, 부모 요소에만 inline-block을 적용할 경우 overflow: hidden 속성도 같이 부여해야 한다.

 

 

 

작업했던 코드는 형제 요소 간 마진 상쇄 현상이 발생하고 있었다. 따라서 형제 중 하나인 h1에 display: inline-block;을 부여했더니 마진상쇄현상이 사라지고 의도했던대로 h1와 p의 마진이 모두 적용되는 것을 확인할 수 있었다.

 

 

 

2. display: flex || grid를 적용한다.

부모 요소에 display: flex나 grid를 주는 경우에도 마진 상쇄를 해결할 수 있다.

 

 

 

---

 

✅ 이전에도 마진 상쇄 현상을 본 적 있었는데 왜 겹치지? 고민하다가 padding으로 밀어냈던 경험이 있다. padding으로 밀어낼 경우에는 디자인의 통일성을 깰 수 있기 때문에, 올바른 해답은 아닐 수 있다고 한다. 이참에 이 현상이 마진 상쇄때문이라는 것도 알게되고 확실한 해결책도 알 수 있게 되었다!

 

---

[참고 자료]

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4#2-%EB%B9%88-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%83%81%ED%95%98-%EB%A7%88%EC%A7%84%EC%9D%B4-%EA%B2%B9%EC%B9%A0-%EB%95%8C

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

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN

https://joonfluence.tistory.com/653

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