마진 상쇄(margin collapsing)

마진상쇄 : 마진 상쇄는 인접한 블록 요소의 마진이 서로 겹칠 때, 두 마진 중 큰 값이 적용되고 작은 값은 무시되는 현상. 예를 들어, 두 개의 요소가 서로 인접해 있을 때, 아래의 규칙이 적용된다.

1. 인접한 블록 요소의 수직 마진이 겹칠 때: 두 요소의 마진이 서로 겹치면, 더 큰 마진값만 적용되고 작은 마진은 사라진다. 이 경우, 두 요소의 마진은 서로 합쳐지지 않고, 그 중 큰 값만 사용된다.
2. 부모 요소와 자식 요소의 마진 상쇄: 만약 자식 요소가 마진을 가지고 있고, 그 자식 요소의 마진과 부모 요소의 마진이 겹친다면, 자식 요소의 마진이 부모의 마진과 합쳐지지 않고, 부모 요소의 마진만 적용될 수 있다. 이는 자식 요소가 화면의 상단이나 하단과 접촉할 때 발생한다. (중요! 세로로만 마진 상쇄가 일어난다.)

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  margin: 20px; /* 부모의 마진 */
}

.child1 {
  margin: 30px; /* 첫 번째 자식의 마진 */
}

.child2 {
  margin: 40px; /* 두 번째 자식의 마진 */
}

예를 들어 이런 HTML과 CSS 코드를 작성했다고 생각해보자. 

하나씩 풀어서 생각해보면,

1. 부모요소 : .parent의 마진은 20px이다.
2. 자식요소 : 자식1의 마진은 30px, 자식2의 마진은 40px이다.

마진 상쇄 과정 

• 자식1과 자식2의 마진 : 자식 1의 하단 마진 30px과 자식2의 상단 마진 40px이 겹쳐져서 더 큰 마진인 자식2의 마진인 40px만 적용되고 자식1의 하단 마진은 무시된다.
• 부모 자식의 마진 : 자식2의 하단 마진 40px과 부모요소의 하단 마진 20px이 겹쳐질 때 자식 2의 마진이 더 크기 때문에 최종적으로 자식 2의 마진 40px이 적용된다. 이와 마찬가지로 자식1의 상단 마진 30px과 부모요소의 상단 마진 20px이 겹쳐질 때 자식 1의 마진이 더 크기 때문에 최종적으로 자식 1의 마진 30px이 적용된다.

그리고, 마진 상쇄에는 여러 규칙이 있다.

다음의 경우엔 자식 요소의 마진이 부모요소의 바깥으로 전파가 된다.

1. border가 없을 경우
2. padding이 없을 경우
3. overflow가 없을 경우

여기 두 가지의 문제가 있다. 질문은 같으나 답은 다르다.

Q1. 아래 코드에서 #a와 #b 사이의 세로 마진은 몇 px일까요?

<div id="a">
  a
  <div id="c">
    c
  </div>
</div>
<div id="b">
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

정답 : 40px

Q2. 아래 코드에서 #a와 #b 사이의 세로 마진은 몇 px일까요?

<div id="a">
  a
  <div id="c">
    c
  </div>
</div>
<div id="b">
  b
</div>

#a {
  padding: 10px;
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

정답 : 30px

두 문제의 차이는 #a에 padding : 10px이라는 코드의 유무밖에 차이가 없는데 왜 정답에서 차이가 있는걸까?

그림으로 풀어보자면 이렇다.

문제 1의 경우와 문제 2의 경우를 그림으로 만들었을 때

문제1은 a의 자식 요소인 c가 a의 마진 30px 보다 큰 40px이라 상쇄가 일어났다. 하지만 문제2의 경우는 부모요소인 a가 패딩값을 10px 주었다. 때문에 자식 요소인 c가 패딩 값을 뚫고 마진을 행사 할 수 없기 때문에 문제 2에서 a와 b 사이의 마진 값은 b의 마진 값보다 큰 a의 마진값 30px이 된다. padding 뿐만 아니라 border나 overflow로 자식요소의 마진이 부모요소의 마진에 영향을 끼치지 못하게 할 수 있다.

위의 문제 외에도 마진 상쇄에는 다양한 경우들이 있는데 다음의 경우엔 마진 상쇄가 일어나지 않는다.

1. 요소가 position : absolute 일 때
2. 요소가 float : left / right 일 때
3. dipaly : flex 일 때
4. display : grid 일 때

참고자료 :  Kimaramy님 블로그, 코드잇 스프린트 CSS 핵심개념 강의 中 "마진 상쇄"