Margin Collapsing(마진 겹침현상)

Margin Collapsing 이란?

1) 요소와 요소 사이에 큰 값이 적용되는 현상

first 클래스의 margin-bottom 30px과 second 클래스의 margin-top 60px 중 60px이 적용되었다.

2) 자식 요소의 margin-top 혹은 margin-bottom이 부모의 높이에 영향을 미치지 않는 현상

자식의 margin-top 50px이 부모의 높이에 영향을 미치지 않았다.
원래는 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정된다.

즉, 자식 요소의 마진 값이 부모 영역을 넘어서고 있는 것이다. 이런 현상을 해결하지 않으면 원하는 디자인 구현에 어려움을 겪을 수 있으니 아래 3가지 방법 중 하나를 선택하면 된다.

1. 부모 요소에 overflow 속성 값을 적용해주기

2. 부모 요소에 display: inline-block 값을 적용해주기

3. 부모 요소에 border 값을 적용해주기