css) margin-collapsing
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of float
developer.mozilla.org
div 내부의 div 의 top-margin 값을 부여했을때 내부 div이 아닌 바깥쪽 div의 margin이 변경되는 문제가 발생했다.
이런 경우가 margin-collapsing 이라는 용어가 따로 있었다.
margin-collapsing 이 발생하는 경우:
마진을 갖는 부모와 마진을 갖는 차일드가 있을때 부모가 시각적 요소가 없는 투명한 상태일때, 위 아래 마진은 더 큰 마진값을 갖는 마진을 따라간다. 즉 작은 마진 값을 갖고 있는쪽은 무시된다.
이런 경우 여러가지 해결 방법이 있었는데 간단한건 부모 div에 1px border를 부여하는 것이었다.
이 외에도 여러가지 해결방법이 있다.
꽤 애먹어서 기록해놓는다.