Margin Collapsing

Margin Collapsing이 발생하는 사례에 대한 생활코딩 강좌에 대한 정리를 포스팅하겠습니다.

Example 1. Margin Collapsing

연속된 태그들 사이에서 Collapsing

<style>
  h1 { margin : 100 px; }
</style>

<h1>first h1</h1>
<h1>second h1</h1>

위의 코드에서 <h1>은 각각 상하좌우로 100px씩 margin을 가져야한다. 즉, 두 <h1>의 상하 간격은 200px이어야 한다. 그러나 실제로 개발자도구를 열어서 보면, 첫 번째 <h1>의 margin-bottom과 두 번째 <h1>의 margin-top이 겹치는 것을 확인할 수 있다. 이것이 Margin Collapsing(마진겹침)현상이다.

• Margin Collapsing에서 두 개의 margin 중 큰 margin 값을 간격으로 벌어지게 된다. 만약 첫 번째 <h1>의 margin이 150px이고, 두 번째 <h1>의 margin이 100px이면, 두 태그의 간격은 Collapsing에 의해, 250px이 아니라 150px이 된다.

Example 2. Margin Collapsing

Parent-Child 관계에서의 Collapsing

<style>
  #parent { 
    border : 1px solid red;
    margin-top: 100px;
  }
  #child {
    background-color : green;
    margin-top : 50px;
  }
</style>

<div id="parent">
  <div id="child">Margin Collapsing</div>
</div>

• 시각적 효과가 있을 때 ([3]번 라인 주석처리 안했을 때)
  
• 시각적 효과가 없을 때 ([3]번 라인 주석처리 했을 때)
  

위 코드에서 Parent의 border 스타일을 주석처리하면 Margin Collapsing이 발생한다.
이와 같이, Parent의 시각적 효과가 사라지면 Margin-Collapsing이 발생한다.

• Parent element의 "시각적 효과"가 사라지면 Margin Collapsing에 의해, parent의 margin값과 child의 margin값 중 큰 margin 값이 child의 margin값이 된다.

Example 3. Margin Collapsing

<style>
  #empty {
    margin-top: 50px;
    margin-bottom: 100px;
    border : 1px solid tomato;
  }
  #normal {
    background-color: powderblue;
    margin-top : 50px
  }
</style>

<div id="empty"><div>
<div id="normal">normal<div>

첫 번째 collapsing 예시에서 본 것처럼, <div id=normal>에 margin 값을 줘도, 값이 <div id="empty">의 margin-bottom보다 작으면, normal div의 위치는 변경되지 않는다.
여기서 empty div의 border를 없애면("시각적 요소를 없애면"), normal div의 margin값만 적용되며 viewport와 50px 떨어진 곳으로 이동된다.

• 어떤 태그의 시각적 요소가 없으면, 그 태그의 margin 값은 side 중 가장 큰 margin 값을 갖게 된다.
  아래 사진에서 왼쪽 부분은 시각적 요소가 있을 때는 예측한대로 margin 값이 들어간다.
  오른쪽 부분은 시각적 요소가 없을 때인데, top과 bottom 중, 큰 값인 100px이 margin이 된다.
  개발자 도구에서, 실제 수치상 margin은 50으로 나오지만, 실제로는 Collaspsing에 의해 margin은 100px이 된다.