어떤 두 개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용하는 브라우저 나름의 렌더링 규칙

자식 블록에서 maring-top을 하면 부모 블록의 margin이 들어가는 현상 발생!!

이유를 몰라서 한참 고민하다가 top으로 해버림 ㅠㅠ

그러던 중 margin-collapsing이라는 현상이 있음을 알게되어 기록하게되었다 ㅎㅎ

• 위와 같이 민트색 박스의 margin이 적용이 되지않고, 회색 박스의 margin이 적용되는 상황이다...😢

• 열심히 구글링 해 본 결과. 부모 블록과 자식 블록의 사이의 경계가 없어 이런 현상이 일어나는 것임을 알게 되었다!!

• 부모 블록에 padding이나 inline값을 줘 경계를 주게 되면 자식 블록의 margin이 정상적으로 작동하게 된다!

따란~

• 그냥 부모 블록에 padding값을 줘도 되지만, 다음에 이 같은 현상이 발생해도 당황하지 말고 해결할 수 있을 것 같다!!!

추가

margin-collapsing이 발생하지 않는 상황

1. position: absolute 상태
2. float: left/right 상태 (단, clear 되지 않은 상태)
3. display: flex 일 때 내부 flexbox item
4. display: grid 일 때 내부 grid item