마진 병합(margin collapsing)

1. 마진 병합

마진 병합은 인접한 블록 레벨 요소의 수직 마진을 합쳐 더 큰 마진 하나만 적용하는 CSS 규칙이다. 이러한 것은 요소 간의 중복된 공간을 제거하고 레이아웃을 최적화 하며 시각적인 안정성을 제공한다. 

 

마진 병합은 주로 부모 요소와 자식 요소 사이에서 나타나는데, 이는 상하로만 나타나게 된다.

또한 형제 요소 사이에서도 마진 병합이 나타난다. 이 또한 상하진 마진만 병합이 된다.

 

2. 해결 방안

1. inline-block

inline-block을 하게 되면 마진 병합이 나타나지 않는다.

 

2. padding, border

부모 요소와 자식 요소 간의 마진 분리는 패딩 혹은 보더로도 가능하지만, 형제간의 마진 분리는 이 방법으로 되지 않는다.

 

3. table

부모 요소와 자식 요소 사이에 table 요소를 넣어 마진 병합을 일어나지 않게 한다. table 요소는 내부에 아무런 콘텐츠를 넣지 않아도 활성화 되기 때문에 마진 병합을 방해한다. 하지만 이는 오래된 해결 방식이다.

 

4. 블록 포맷팅 컨텍스트

부모 요소에 display:flow-root를 적용하여 마진 병합을 해결할 수 있다. display: flow-root도 블록 레벨요소라고 볼 수 있지만, 새로운 블록 포맷팅 컨텍스트를 만들어 낸다.

 

여기서 블록 포맷팅 컨텍스트(Block Formatting Context BFC)란?

웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이 아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위이다.

독립적인 레이아웃 영역 : BFC는 요소들이 독립적으로 레이아웃되는 공간을 만들어 준다. 즉 BFC 안에 있는 요소들은 외부 요소의 영향을 받지 않고 자신의 레이아웃을 유지한다.

 

여기서 블록 포맷팅 컨텍스트는 다른 방법으로도 생성이 가능하다. 대표적으로 부모요소에게 overflow: hidden을 지정하는 것이다. overflow 를 초기값 visible이 아닌 값으로 설정하게 된다면, 부모 요소의 바깥과 부모 요소의 내부를 분리해준다. 이 방법으로는 마진 병합을 해결할 수 있지만, overflow: hidden의 원래 역할인 넘쳐 흐르는 콘텐츠를 자를수도 있다. 

overflow 다른 속성인, auto, scroll로도 생성이 가능하다.

 

그리고 이외에 방법은 여러가지가 있다.

float속성에 left 또는 right

display 속성에 inline-block 또는 flex, grid 속성을 설정

position 속성에 absolute 또는 fixed로 설정 하는 것이 있다.

 

5. 네거티브 마진(Negative margin)

네거티브 마진이 적용된 요소의 공간 축소가 된다.

• 요소의 위치가 네거티브 마진으로 인해 위나, 왼쪽으로 이동하게 된다. 이로 인해 주변의 다른 요소들이 겹치거나 간격이 줄어드는 효과가 발생한다. 

마진 병합 규칙에 의해 큰 쪽의 마진 요소간 간격으로 적용이 된다.

• 두 요소 간의 마진 병합이 발생할 때, 긍정적 마진이 있는 요소와 네거티브 마진이 있는 요소 간의 차이에 따라 실제 간격이 결정된다. 이 경우 더 큰 쪽의 마진 절대값에 따라 간격이 결정된다.