CSS작업을 하다보면 마진값이 이상하게 top, bottom에 안들어가는 상황이 발생한다.
이건 그런 현상을 마진 병합 현상(Margin Coolapsing)이라고 한다.
마진 병합 현상은..
- 인접하는 Block 요소끼리만 발생.
- 상하단만 병합현상 발생.(좌, 우 X)
- 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 margin 값이 적용되는 현상.
- 부모요소와 자식요소가 존재할 때 자식 요소의 margin-top 혹은 margin-bottom 값이 부모의 높이에 영향을 미치지 않는 현상.
해결방법
- 부모요소에 overflow 속성 값 적용.
- 부모요소에 display: inline-block값 적용.
- 부모요소에 border 값 적용.
- 부모요소에 display:flow-root 적용.(IE 적용 불가함)
굳이 꼭 마진 병합 현상을 해결할 필요 없이, 이 현상에 대해 알고 작업을 진행하면 된다.
