마진 병합 margin collapsing

margin:20px; padding:20px이다. section #1 아래의 margin과 section #2 위의 margin을 합하면 40px인데 20px만 적용되었다. 이게 마진 병합이다.

마진 병합 현상의 조건

인접해있는 block 요소끼리 일어남

상하단에만 일어남

의도된 동작이다

때에 따라 마진 병합이 문제가 되는 경우가 있다. 부모 div 안에 자식 div 2개를 넣었는데 위와 아래가 마진 병합 현상이 일어나 붙는 경우다.

이 경우 parent와 child 사이에 뭔가가 있으면 마진 병합 현상이 발생하지 않는다. parent의 padding을 1로 주면 이 현상이 사라진다.

혹은 border를 1px solid transparent로 주면 된다.

단점은 공간을 차지하고 있기 때문에 디자인할 때 의도대로 안될 수가 있다.

child의 display 속성을 inline-block을 주면 부모와의 마진 병합 현상은 일어나지 않지만 child간에 마진 병합이 사라져서 간격이 벌어진다.

parent의 overflow 속성에 hidden을 해주면 해결된다.

overflow란 요소의 콘텐츠가 특정 공간에 들어가기엔 너무 큰 경우 스크롤바를 만들거나 숨기거나 나타내거나 할 때 쓰이는 속성이다.