margin 병합에 대해

블록 박스 예시로 설명하면:

<div style="margin-bottom: 20px">위 박스</div>
<div style="margin-top: 30px">아래 박스</div>

이런 상황에서 예상하면:

• 위 박스의 아래 마진 20px
• 아래 박스의 위 마진 30px
• 총 간격 = 50px이 될 것 같지만...

실제로는:

• 두 마진 중 더 큰 값인 30px만 적용
• 이것이 바로 "마진 병합" 현상

마진 병합이 일어나는 주요 상황:
1. 인접 형제 요소들 사이

<p style="margin: 20px">첫 번째 문단</p>
<p style="margin: 30px">두 번째 문단</p>
<!-- 간격은 30px이 됨 -->

2. 부모-자식 요소 사이

<div style="margin-top: 50px">
  <p style="margin-top: 20px">자식 문단</p>
</div>
<!-- 위쪽 마진은 50px이 됩니다 -->

마진 병합을 피하는 방법:

1. padding 사용
2. border 추가
3. 요소에 float 적용
4. 요소를 absolute 포지션으로 설정
5. 요소에 display: flex 적용

실무에서는:

/* 이런 상황을 피하기 위해 */
.title {
  margin-bottom: 20px;
}
.subtitle {
  margin-top: 10px;
}

/* 한쪽으로만 마진을 주는 것이 좋습니다 */
.title {
  margin-bottom: 20px;
}
.subtitle {
  /* margin-top 제거 */
}