마진상쇄란?
마진 상쇄는 어떤 두개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용하는 렌더링 규칙.
마진 상쇄가 일어나는 상황
1. 인접 block간 상하 마진이 겹칠 때
겹쳐진 두 마진 값을 비교해,더 큰 마진 값으로 상쇄해 렌더링합니다.
만약 겹쳐진 두 값이 동일할 경우, 중복을 상쇄해 렌더링합니다.
2. 비어있는 요소(height:0)의 상하 마진이 겹칠 때
레이아웃 구성을 위해 div로 영역을 만들어 놓거나,내부에 요소를 append하기 위해 빈 컨테이너를 만들어놓을 경우 등의 상황에서 비어있는 요소를 만드는 경우가 생긴다.(빈요소)이러한 빈 요소들과 인접한 요소들 간에 마진 겹침이 일어나는 경우 빈 요쇼의 경우는 위아래를 구분할 수 없어서 마진 상쇄가 발생한다.
3.부모 block과 첫번째 자식 block의 상단(하단) 마진이 겹칠떄
마진이란 콘텐츠 간의 간격이고, 간격을 벌리기 위해서는 경계를 필요로 합니다. 브라우저는 부모 박스와 첫 번째(마지막) 자식 박스 간의 경계를 그 사이에 있는 border / padding / inline 콘텐츠 유무로 판단합니다. 앞에 설명했던 빈 박스의 마진 상쇄 현상과는 조금 다르게, 이미 명시적으로 height / min-height 값을 줬더라도 이번 경우에선 신경 쓰지 않습니다.
따라서 부모와 첫 번째(마지막) 자식 사이에 inline 콘텐츠가 없거나, 상단(하단)에 명시적으로 padding 또는 border 값을 주지 않았다면 마진이 겹치게 됩니다. 이때, 자식 요소의 마진이 더 크든 작든 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링이 됩니다.
마진 상쇄 규칙 적용
마진 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용됩니다.
마진 값이 0이더라도 상쇄 규칙은 적용됩니다.
좌우 마진은 겹치더라도 상쇄되지 않습니다.
마진 상쇄 규칙 예외
다음과 같은 상황에서는 인접 요소 간 마진 상쇄가 일어나지 않습니다.
박스가 position: absolute 된 상태
박스가 float: left/right 된 상태 (단, clear 되지 않은 상태)
박스가 display: flex 일 때 내부 flexbox item
박스가 display: grid 일 때 내부 grid item
정리
경계를 인식할 수 있냐가 마진 상쇄가 발생하는 기준인 것 같은데
padding을 주거나, border를 주거나, 사이에 인라인 요소를 삽입하거나 해서 경계를 만들어 주는 것이 해결법이다.
