CSS 마진 병합 현상

마진 병합이란?

수직으로 인접한 두 마진이 더 큰 쪽으로 병합되는 현상입니다.

마진 병합이 생기는 경우

1. 인접 형제 노드의 수직 마진

<div class="bro1"></div>
<div class="bro2"></div>

.bro1{
  width:100px;
  height:100px;
  background-color:orange;
  margin-bottom:20px;
}
.bro2{
  width:100px;
  height:100px;
  background-color:skyblue;
  margin-top:100px;
}

bro1의 20px의 마진과 bro2의 100px이 맞닿아 있기 때문에 120px이 되는 것이 아닌, 마진이 더 큰 쪽으로 병합되어서 100px의 마진이 됩니다.

2. 부모와 자식 요소 간의 분리 요소(텍스트나 패딩, 보더 등)가 없을 때

<div class="parent">
  <div class="child">child</div>
</div>

.parent{
  background-color:pink;
  width:300px;
  height:150px;
  margin-top:10px;
}
.child{
  background-color:yellowgreen;
  width:200px;
  height:100px;
  margin-top:50px;
  
}

margin-top이 50px로 더 큰 자식 요소의 마진이 적용됩니다.

3. 빈 블럭의 수직 마진
   테두리, 안쪽 여백, 인라인 콘텐츠, height, min-height, max-height가 없으면 블록의 margin-top과 margin-bottom이 서로 상쇄됩니다.

마진 병합이 되는 경우들의 공통점은 마진과 마진 사이에 아무것도 없어서 맞닿아 있으면 성립된다는 점입니다.