CSS에서 마진(Margin) 겹침 현상의 이해

CSS에서 마진 겹침(또는 마진 중복, Margin Collapsing) 현상은 두 인접 요소의 마진이 서로 겹쳐 하나처럼 보이는 현상을 말합니다.

이는 블록 레벨 요소의 상하 마진에만 해당되며, 인라인 레벨 요소에는 적용되지 않습니다.

마진 겹침은 주로 다음 세가지 상황에서 발생합니다:

마진 겹침 현상 발생 상황

이러한 사례를 좀 더 구체적으로 살펴보겠습니다.

상황	설명
인접 형제 요소	간 두 형제 요소의 마진이 서로 맞닿아 있는 경우, 두 마진 중 더 큰 값으로 겹침이 발생합니다.
부모 요소와 첫 번째/마지막 자식 간	부모 요소에 상단(또는 하단) 마진이 없고, 첫 번째(또는 마지막) 자식 요소에 마진이 있는 경우, 마진이 겹쳐 부모 요소를 넘어갈 수 있습니다.
빈 블록 요소	상단과 하단 마진이 있는 빈 요소는 그 마진이 겹쳐 하나의 마진으로 처리됩니다.

html

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

아래와 같은 css가 있을때, 20px마진과 30px마진이 더해서 50px이 되어야 될것같지만, 실제 마진이 30px만 적용됩니다.

css

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

해결 방법	설명
패딩 사용	겹치는 마진 대신 패딩을 사용합니다. 패딩은 겹침 현상 없이 요소의 내부 공간을 증가시킵니다.
테두리 추가	테두리(border)를 추가하여 마진 겹침을 방지할 수 있습니다. 테두리는 겹침 현상을 발생시키지 않습니다.
빈 요소의 경우 높이 또는 테두리 설정	빈 블록 요소에 미세한 높이(min-height: 1px;)나 투명 테두리(border-top: 1px solid transparent;)를 추가합니다.
flexbox 또는 grid 사용	부모 요소를 flex 또는 grid 컨테이너로 만들어 자식 요소들의 레이아웃을 변경함으로써 마진 겹침을 방지할 수 있습니다.