[CSS] margin collapsing

구글에 'margin collapsing'만 쳐도 이런 제목의 MDN 문서가 보인다 ㅋㅋ

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Mastering margin collapsing - CSS: Cascading Style Sheets | MDN

block들의 top margin, bottom margin에서 발생하는 문제

아래 block의 top margin과 위 block의 bottom margin이 둘다 존재할 때, 두 block간 간격이 두 margin값을 더한 값이 아니라 둘 중 더 큰 하나의 margin 값으로 간격이 잡힌다.

float 된 요소들이나 position이 absolute인 요소들은 margin collapsing이 일어나지 않는다.

 

1. 인접한 형제 요소간에 발생

2. 부모와 자식 요소간을 분리하는 콘텐츠(부모의 border, padding, inline part{collapsing이 block간 발생})가 없고 block formatting context이 없을 때 발생

3. 빈 블록(border, padding, inline contents, height 속성(min, max도 포함)이 없을 때)일 때 

 

https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing

How to disable margin-collapsing?

특히 2번에서 자식의 margin값이 부모를 넘어설 때 처음 의도했던 부모 margin값이 무시되어버리는 문제가 발생하는데

이를 해결하기 위해서

1. 부모 요소에 border 선언

2. 부모 요소에 overflow 선언(default 값인 visible만 아니면 됨) 다만 hidden은 의도치 않게 overflow 된 것을 가리게 될 수 있으므로 주의

3. 부모 요소에 float 선언

4. 부모 요소 display에 inline-block이나 flex 선언

5. 부모 요소에 position: absolute; 선언