[CSS] Margin Collapse

안녕하세요 동기 여러분! 오늘은 Margin Collapse에 대해 알아봅시다! Collapse는 영어사전에서 찾아보면 붕괴되다, 무너지다 또는 명사로 실패, 붕괴라는 뜻을 가지고 있습니다.

 

Margin Collapse

마진이 겹쳐서 박살이 나는 경우가 있는데 이를 Margin Collapse라고 합니다.

 

아래의 코드로 실험을 해봅시다.

<!-- HTML -->
    <div class='protoss'>
      <h2>프로토스</h2>
      <p>사이오닉 에너지를 사용하는 최초의 자손</p>
    </div>
    <div class='terran'>
      <h2>테란</h2>
      <p>코프룰루 지역에 정착한 인류</p>
    </div>
    <div class="zerg">
      <h2>저그</h2>
      <p>젤나가가 창조한 두 번째 생명체</p>
    </div>

/* CSS */
* {
  width: 300px;
  text-align: center;
}

.protoss {
  background-color: gold;
  border: 3px solid black;
  margin-bottom: 50px;
}

.terran {
  background-color: crimson;
  border: 3px solid black;
  margin-top: 20px;
  margin-bottom: 20px;
}

.zerg {
  background-color: blueviolet;
  border: 3px solid black;
  margin-top: 20px;
}

 

실행 화면 

 

프로토스와 테란

프로토스와 테란의 사이의 거리는 마진은 .protoss { margin-bottom: 50px }와 .terran { margin-top: 20px }를 더하여 70px가 와야 하지만 실행화면에 나온 거리는 사실 50px입니다. 이를 뒷받침하는 증거는 .terran { margin-top: 20px }를 지우고 실행하면 나타납니다.

 

* {
  width: 300px;
  text-align: center;
}

.protoss {
  background-color: gold;
  border: 3px solid black;
  margin-bottom: 50px;
}

.terran {
  background-color: crimson;
  border: 3px solid black;
                           /* <- 여기에 있던 margin-top를 지움 */
  margin-bottom: 20px;
}

.zerg {
  background-color: blueviolet;
  border: 3px solid black;
  margin-top: 20px;
}

결과값이 같네요?

이처럼 프로토스와 테란 사이의 거리의 마진이 다 적용이 안되는 것을 Margin Collapse, 마진이 박살(여백 상쇄)났다고 표현합니다. (물론 마진이 박살났다는건 저만의 표현ㅋㅋㅋㅋ)

 

마진 박살(여백 상쇄)은 좌우에서도 일어납니다.

 

---

 

오늘의 느낌

MDN Web Docs의 여백 상쇄 정복 시간나면 읽어 보자
링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN