[CSS] 마진 중첩(상쇄) 현상 (margin overlap 또는 margin collapse)

박스 모델을 사용할 때 주의해야할 점이 있다.

요소들을 세로로 배치할 경우 각각의 요소들의 margin과 margin이 만나는 지점에서 값이 큰쪽으로 겹쳐진다(중첩된다)는 점을 주의해야한다.

일반적으로 생각했을 때 각 요소에 margin 값이 20px로 지정되어있다고하면 요소간의 간격이 40px이 될거라고 생각하기 쉽지만 실제 간격은 20px이 된다. 

이러한 현상을 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 한다.

반면에 가로로 요소들을 배치할 경우 이러한 margin 중첩현상은 발생하지 않는다.