마진상쇄는 무엇인가?

마진 겹침현상이라고 불린다.

이미지에 마진 값을 부여하면 맞닿아있는 면의 마진은 겹치게 된다는 이야기이다. 예를 들어서 왼쪽 이미지 마진 4px값와 오른쪽 이미지 마진 4px의 면이 맞닿아 있다면 8px가 아니라 4px만큼만 마진을 적용한다는 이야기이다.

블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동

MDN

마진 상쇄 규칙 예외

다음과 같은 상황에서는 인접 요소 간 마진 상쇄가 일어나지 않습니다.

• 박스가 position: absolute 된 상태
• 박스가 float: left/right 된 상태 (단, clear 되지 않은 상태)
• 박스가 display: flex 일 때 내부 flexbox item
• 박스가 display: grid 일 때 내부 grid item

출처 : https://velog.io/@raram2/CSS-마진-상쇄Margin-collapsing-원리-완벽-이해