(CSS) margin이 제대로 적용되지 않을 때, margin collapsing이란?

 

margin collapsing이란?

 

가끔 margin을 설정하다 보면 위쪽과 아래쪽의 margin이 제대로 적용되지 않는 경우가 있다.

 

이는 "margin collapsing" 때문이다.

 

블록 요소의 상하단 margin이 서로 인접할 때, 두 마진 중 큰 값만큼만 표시되는 현상이다.

 

즉, 두 마진이 합쳐져 하나의 마진으로 표시되는 것이다. 

 

 

 

margin collapsing 해결 방법

 

이를 해결하기 위해서는 부모요소에 overflow : auto; 또는 overflow : hidden;을 적용하면 해결된다. 

 

해당 코드를 적용하면 부모에 BFC가 형성되어 margin collapsing 현상이 방지되고, 

 

겹쳐졌던 margin이 제대로 나오게 된다. 

 

div.container {
    overflow: hidden; /*부모 요소에 추가*/
}

div.container span {
    display: block;
    margin-top: 20px;
}