Collapsing Margins 현상

Collapsing Margins(여백 병합 현상)이란?

CSS에서 margin은 요소 간의 간격을 조정하는 속성이지만, 특정 상황에서는 두 개 이상의 margin이 병합되어 하나로 처리된다. 이를 Collapsing Margins(여백 병합)이라고 한다.

병합되는 조건

1. 형제 요소 간의 margin
   • 서로 인접한 블록 요소들이 각각 margin-bottom과 margin-top을 가지고 있으면, 두 값 중 더 큰 값이 적용된다.

   .box1 { margin-bottom: 20px; }
   .box2 { margin-top: 30px; }
   

   • 실제 적용된 여백은 30px (둘 중 더 큰 값)만 반영된다.
2. 부모와 자식 요소 간의 margin
   • 부모 요소의 margin-top과 첫 번째 자식 요소의 margin-top이 병합될 수 있다.

   .parent { margin-top: 20px; }
   .child { margin-top: 30px; }
   

   • 실제 적용된 여백은 30px (둘 중 더 큰 값)만 반영된다.
3. 빈 블록 요소의 margin
   • 내용이 없는 블록 요소라도 margin이 병합될 수 있다.

Collapsing Margins 현상으로 margin-top:30으로 합쳐졌다.

See the Pen Collapsing Margins by luckyzi (@luckyzi) on CodePen.

 

Collapsing Margins 해결 방법

1. overflow: hidden 사용

병합을 방지하려면 부모 요소에 overflow: hidden을 추가한다.

.parent {
  overflow: hidden;
}

2. padding을 이용한 대체

부모 요소의 padding을 사용하면 margin 병합 현상을 방지할 수 있다.

.parent {
  padding-top: 1px;
}

이 방법은 자식 요소의 margin-top이 부모 요소의 padding과 병합되지 않도록 한다.

3. border 추가

부모 요소에 border를 추가하면 margin 병합이 발생하지 않는다.

.parent {
  border-top: 1px solid transparent;
}

4. display: flex 또는 display: grid 사용

flex나 grid를 사용하면 margin 병합이 발생하지 않는다.

.parent {
  display: flex;
  flex-direction: column;
}

5. margin-top: auto 활용

자식 요소의 margin-top을 auto로 설정하면 병합을 방지할 수 있다.

.child {
  margin-top: auto;
}

 

정리

• Collapsing Margins은 인접한 요소의 margin이 병합되는 현상이다.
• 부모와 자식 간, 형제 요소 간, 빈 블록 요소에서도 발생할 수 있다.
• 해결 방법으로 overflow: hidden, padding, border, display: flex/grid 등을 사용할 수 있다.