[CSS]Margin collapse into each other

Margin서로 상하좌우 충돌할 경우

margin 이 작은쪽이 큰 쪽에 먹힘

1. 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용

2. 빈 요소의 상/하 마진이 겹칠 경우 ==> 빈 요소의 마진 Top or Bottom 1개만 남음(위 아래로 박스에 마진이 붙었을 지라도)

3. 부모 박스와 자식 박스의 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용

- 부모의 마진이 자식의 마진보다 클때

- 부모의 마진이 자식의 마진보다 작을 때

아래 사이트가 설명 잘 해놓음

The Basic Concepts

What’s important to know is :

Margin collapse only happens vertically.
It only happens to block-level elements — this does not include inline-block elements[1].
It only happens if the elements come in direct contact with each other (they can’t be separated by padding, borders, line boxes, etc, or be in a different formatting context[1]).

참조