Collapsing margin 현상과 padding

😊

Collapsing margin은 CSS에서 마진(또는 여백)이 겹쳐질 때 발생하는 현상을 나타내는 용어이다.

이러한 현상은 주로 블록 요소 간의(body나 box) 마진이 서로 겹치거나 결합할 때 발생한다.

 

이 현상은 한국어로 마진 겹침, 또는 마진 병합이라고 부른다.

두 개의 블록 요소가 상하로 인접하고, 상단 또는 하단 마진 중 하나 또는 둘 다가 존재할 때 발생한다.

두 마진 중 큰 쪽의 크기가 적용되며, 두 마진이 합쳐져서 하나의 마진처럼 보이게 된다.

 

예를 들어, 두 개의 블록 요소가 A와 B가 상하로 인접하고 있을 때, A의 하단 마진과 B의 상단 마진이 겹칠 경우,

이 두 마진이 병합되어 하나의 큰 마진으로 표시된다.

이는 일반적으로 원치않는 레이아웃 현상을 생성할 수 있으므로 CSS에서 이를 조절하고 방지해야 하는데, 이를 위해서 padding을 활용할 수 있다.

 

해결 방법

Collapsing margins 현상은 일반적으로 margin과 padding을 활용해서 해결한다.

Padding을 사용하는 것은 margin collapsing을 직접 해결하는 것이 아니라 여백을 다루는 다른 방법이다.

 

간단히 이해하면 된다.

padding을 사용하면 상하로 인접한 블록 요소 사이에 padding을 추가하여 margin이 서로 겹치는 것을 방지할 수 있다.

이렇게 하면 margin이 내부로 들어가게 되므로 겹침이 발생하지 않게 된다.