두개 이상의 블락 엘리먼트가 인접해 있는 경우 하나의 여백을 형성하기 위해 여백을 결합할 수 있습니다.
이 현상은 형제 엘리먼트, 부모/자식 엘리먼트, 자기 자신의 엘리먼트에서 선언된 margin CSS에 의해 발생합니다.

1.형제 엘리먼트간의 마진 겹침

두 개 이상의 인접한 엘리먼트 간의 나타나는 마진 겹침 현상

li 엘리먼트 간의 윗여백 10px, 아래여백 20px로 li간의 여백은 30px을 예상하였지만
마진 겹침으로 더 큰쪽인 20px의 여백이 나타나고 있습니다.

2.부모/자식간의 마진 겹침

부모/자식 관계인 엘리먼트들 사이에 나타나는 마진 겹침 현상

3.마진 겹침의 해제

다음 CSS 선언을 통해 마진 겹침 해제가 가능합니다.

float : left or right
display : inline-block
position : absolute

4.마진 겹침의 활용

마진 겹침이 해제된 코드를 보면 제목과 제목, 제목과 단락사이가 일정하지 않습니다.
제목, 단락 등 엘리먼트간의 일정한 여백 유지를 위해 사용합니다.
여백을 위해 클래스 추가, CSS 재선언 등의 작업이 불필요합니다.

마진 겹침이 적용된 코드

마진 겹침이 해제된 코드

두 예제를 보면
마진 겹침이 적용된 코드는 제목과 문단의 간격이 일정합니다.
그러나 해제된 코드는 제목과 문단의 여백이 같이 적용되여 일정치 않습니다.

이처럼 마진겹침을 활용하여 보다 효율적으로 코딩할 수 있습니다.