margin collapse (마진 병합)

인접 형제 요소의 마진은 상쇄됩니다.

See the Pen margin collapse sibling by 석금용 (@gmyong) on CodePen.

 

.box1, .box2, .box3에 각각 margin 값으로 10px을 적용했습니다. 그러면 우리가 생각하기에는 각 박스 사이에는 20px의 공간이 생겨야 되지만, 마진 병합 현상으로 10px의 공간만 나타납니다. 만약 margin의 값이 다르다면 값이 큰 수치 값만큼 공간이 생깁니다.

부모와 첫 번째 자식 요소

첫 번째 자식 요소에 margin-top 속성을 적용했을 때 마진은 상쇄돼서 부모 바깥에 나타나게 됩니다.

 

See the Pen margin collapse top by 석금용 (@gmyong) on CodePen.

 

.box2가 .box1 안에서 margin-top 속성에 의해 밑으로 10px 이동하는 것이 아니라, .box1과 .box2가 함께 10px 밑으로 내려간 것을 볼 수 있습니다.

이때 만약 .box1이 border, padding 속성을 갖거나 BFC이거나, .box2에 float 속성이 있고 .box1에 clear가 있으면 .box1은 안 움직이고 . box2 만 움직이게 됩니다.

부모와 마지막 자식 요소

마지막 자식 요소에 margin-bottom 속성을 적용하면 마진이 상쇄돼서 부모 바깥에 나타나게 됩니다.

 

See the Pen margin collapse bottom by 석금용 (@gmyong) on CodePen.

 

마지막 자식 요소인 .mb10에 margin-bottom 속성을 적용하면 .box1과 .box3 사이에 10px 공간이 생깁니다. 이때 .box1이 height, min-height, max-height를 가졌거나 BFC이면 .box1과 .box3 사이에 공간이 생기지 않고 .box1의 높이가 margin-bottom의 값만큼 높아집니다.