[CSS] 마진 병합 현상 (margin-collapsing)

마진 병합 현상이란?

: 상하단 margin 값이 서로 병합되는 현상으로 margin 크기가 더 큰 값이 적용된다. (Block요소에서 일어남)

 

형제지간 마진 병합 

box2 위 아래에 margin값을 줬지만 병합되어 40px이 아닌 20px 적용

See the Pen margin-collapsing #1 by Jieun Kim (@ji-silver) on CodePen.

 

부모 자식간의 마진 병합

자식에게 margin 값을 적용했지만 부모에도 영향을 미침

See the Pen margin-collapsing #2 by Jieun Kim (@ji-silver) on CodePen.

해결방법:

부모태그에 border나 padding값을 주어 벽이나 공간을 만든다.