부모 자식 간에 발생하는 마진 병합 현상

부모 자식 간에 발생하는 마진 병합 현상은 자식의 margin-top 속성이 부모에게 영향을 미치는 것을 말합니다.

다음 CSS 코드에서 #child 안에 margin-top: 100px;을 적용하면 자식인 #child 영역의 위쪽에만 여백이 100px만큼 생겨야 합니다. 즉, 전체 이미지에서 파란색 박스만 아래로 100px 움직여야 합니다. 하지만 결과 화면을 보면 부모인 #parent의 노란색 박스까지 함께 내려갑니다.

예제 소스 Exercise/7장/3_collapsing_margin/index.html

<div id="parent">
    <div id="child"></div>
</div>