마진 병합 현상

margin

모든 HTML 요소들은 브라우저에서 렌더링 될 때 CSS 박스 모델에 따라 네모난 박스로 표현이 된다. 이때 박스 바깥 쪽 영역으로 요소와 요소 사이 공백역할을 하는 속성을 margin이라 한다.

위 그림 같은 경우 두개의 div 요소에 각각 one, two class를 지정하고 margin을 25px으로 지정해 주었다.

• 문제점
  one과 two에 margin:25px 속성을 부여했음으로 일반적으로 예상이 되는 결과는 아래와 같을 것이다.
  
  그런데 실제 결과는 마진 병합 현상으로 인해 one과 two사이에 margin이 25px만 존재하는 형식으로 보인다.

  그렇다면 div의 display를 inline-block으로 변경해 좌우 margin이 겹쳐질 때는 어떻게 될지 확인해 보자.
  

좌우 margin이 겹쳐지는 경우에는 margin이 중첩되지 않고 의도한대로 잘 출력되는 것을 확인할 수 있다.

이번에는 inline-block이 수직으로 배치될 때 margin이 어떻게 되는지 확인해 보자.

inline-block의 상하 margin이 겹쳐지는 경우에는 margin이 중첩되지 않는 것을 확인할 수 있다.

이번에는 부모 자식 관계를 갖는 요소끼리도 마진 병합 현상이 일어나는 지 확인해 보자.

parent에 지정된 margin:30px는 적용이 되었지만 one의 위쪽 margin과 two의 아래쪽 margin이 parent의 margin과 중첩되어 없어진 것을 확인할 수 있다.

이를 통해 마진이 병합되는 현상은 요소의 display가 block이면서 마진이 수직으로 배치될 때만 발생하고 부모 자식 관계에서도 이런 현상이 발생하는 것을 확인할 수 있다.

마진 병합 현상

display 형태가 block인 것들에 한해서 발생하는 현상으로 겹쳐지는 margin중 더 큰 margin이 작은 margin을 상쇄시키는 현상. 좌우로는 적용되지 않고 오로지 수직방향으로만 적용된다.

이러한 마진 병합 현상은 개발자의 입장에서 편리하게 사용될 수도 있지만 의도하지 않은 결과를 내는 경우 이를 해결해야 하는 방법이 필요하다.

• 해결 방법

1. 부모요소에 overflow:hidden 속성 추가하기
   
   부모요소에 overflow:hidden을 추가하게 된다면, 새로운 block format context가 부모요소 기준에서 만들어 지면서 .parent의 margin과 .child의 margin이 따로 적용되면서 부모요소와 자식요소간의 마진 병합 현상이 해결된다.
   

2. 부모요소나 자식요소에 border나 padding을 1px 적용하기

   
   부모요소에 border나 padding을 적용하게 된다면 공간을 차지하는 요소가 부모와 자식요소 간에 생성되어 margin이 겹치지 않게 되고 마집 병현 현상이 해결된다. 하지만, 의도하지 않은 1px을 사용했음으로 원하는 결과와 차이가 나기 때문에 적합한 방법은 아니라 생각한다.
   
   

3. <table> 요소 추가하기

   margin이 겹쳐지는 div.one의 위쪽과 div.two의 아래쪽에 빈 테이블을 생성해 margin을 겹치지 않게 함으로써 마진 병합 현상을 해결 가능하다. 하지만, 마크업이 복잡해지는 문제점이 발생한다. 이는 가상 요소로 table을 생성해 해결이 가능하다.

4. 자식요소에 display:inline-block속성 추가하기
   

   마진 병합 현상은 block 요소끼리만 일어난다는 점을 활용해 display속성의 값을 inline-block으로 변경해 해결이 가능하다. 하지만, 결과를 보면 알 수 있듯이 div.one과 div.two 사이의 margin 또한 마진 병합 현상이 해결돼 50px로 설정이 된다. 앞선 해결 방법들과 같은 결과를 얻고 싶은 경우 first-child 외의 나머지 자식들에게 margin-top:0 속성을 추가함으로써 해결이 가능하다.

결론

마진 병합 현상은 상황마다 의도한 결과를 보여줄 수도 있고 아닐 수도 있다. 그렇기 때문에 상황마다 적절하게 활용하고, 마진 병합 현상이 의도하지 않은 결과를 보이는 경우 상황에 따라 알맞은 해결 방법들을 통해 이를 해결해야 한다고 생각한다.
EX) 형제 요소 간의 마진 병합 현상을 해결하고 싶은 경우 => 3번 or 4번 해결 방법
부모 자식 요소 간의 마진 병합 현상을 해결하고 싶은 경우 => 1번 or 3번 or 4번 해결 방법