인접 형제 요소의 마진은 상쇄됩니다.
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의 값만큼 높아집니다.
'CSS' 카테고리의 다른 글
| 웹 이미지에 대한 이해 (0) | 2020.07.22 |
|---|---|
| image 하단에 공백이 생기는 이유 (0) | 2020.07.21 |
| 웹 접근성을 위한 텍스트 숨김 처리 (0) | 2020.07.17 |
| Negative margin (음수 마진) (0) | 2020.07.17 |
| display: block과 inline 차이 (0) | 2020.07.17 |