[지식루프의 웹개발공부] CSS의 margin 중복 (Collapse)

CSS에서 마진 중복(Margin Collapse)은 인접한 블록 요소들의 상하 마진(margin-top, margin-bottom)이 겹쳐지는 현상입니다.

 

이 현상은 수직 마진에서만 발생하며, 수평 마진에서는 적용되지 않습니다.

 

마진 중복이 발생하면 두 요소의 마진이 합쳐지는 대신, 더 큰 마진 값이 적용됩니다.

 

이를 통해 예상치 못한 마진이 설정될 수 있으니, 이를 이해하고 관리하는 것이 중요합니다.

 

 

# 마진 중복이 발생하는 경우

 

1. 인접한 블록 요소 간
두 블록 요소가 위아래로 인접해 있을 때, 서로의 margin-bottom과 margin-top이 중복됩니다. 이때 더 큰 값이 적용됩니다.

 

이 경우, 두 블록 요소 사이의 간격은 50px이 아닌, 30px(더 큰 값)만 적용됩니다.

 

2. 부모와 자식 요소 간
부모와 자식 요소 간에도 수직 마진이 중복될 수 있습니다. 자식 요소가 부모의 상단에 바로 위치한 경우, 자식 요소의 margin-top이 부모의 margin-top과 중복됩니다.

이 경우, child 요소의 margin-top이 부모의 margin-top과 중복되며, 상단 여백은 50px만 적용됩니다.

 

3. 빈 블록 요소의 마진
만약 블록 요소가 내용 없이 비어 있으면, 해당 요소의 상하 마진이 중복될 수 있습니다.

 

 

# 마진 중복을 방지하는 방법

 

1. overflow 속성 사용
부모 요소에 overflow: hidden 또는 auto를 적용하면 마진 중복을 방지할 수 있습니다.

.parent {
  overflow: hidden; /* or auto */
}

 

2. display 속성 변경
요소의 display 속성을 inline-block, flex, grid 등으로 변경하면 마진 중복이 발생하지 않습니다.

.parent {
  display: inline-block;
}

 

 

3. padding 또는 border 추가
부모 요소에 padding 또는 border를 추가하면 자식 요소와의 마진 중복을 피할 수 있습니다.

.parent {
  padding-top: 1px; /* 또는 border-top: 1px; */
}

 

4. float 또는 position 속성 사용
요소에 float 또는 position: absolute와 같은 속성을 부여하면 마진 중복이 발생하지 않습니다.

.parent {
  position: relative;
}
.child {
  position: absolute;
}

 

마진 중복은 수직 간격을 설정할 때 종종 예상과 다르게 작동할 수 있으므로, 상황에 맞게 이를 방지하거나 활용하는 방법을 익히는 것이 중요합니다.