margin이란 요소의 바깥 여백 영역을 설정하는 css 속성이다.
특정 요소에 margin 값을 지정했을 때 의도치 않게 여백이 줄어들었거나, 늘어났거나 내가 원하는 방향으로 여백이 생기지 않아 곤란한 적이 많았다.
이에 대한 이유를 못찾고 한참 헤맸는데 이를 마진 상쇄 (Margin Collapseing) = 마진 병합 현상이라고 한다.
✔️ 마진 병합 현상이란?
인접하는 블록 요소의 상하단 margin이 병합되는 현상을 말한다.
margin의 크기는 병합되는 margin 중에서 큰 값으로 병합된다.
✔️ 마진 병합 현상의 조건
- 인접하는
블록 요소끼리만 일어남 (인라인 등은 x) - 상하단 병합현상만 일어남 (좌우의 여백은 병합되지 않음)
- 마진 값이 0이더라도 상쇄 규칙은 적용됨
💡 마진 상쇄 예외
floating요소와 절대 위치 (position: absolute)를 지정한 요소의 여백은 절대 상쇄되지 않음- 박스가
flex/grid일 때 내부 요소는 적용되지 않음
✔️ 마진 병합이 발생하는 상황은?
-
인접한 형제 사이 상하 마진이 겹칠 때
-
부모와 자식 사이 상하 마진이 겹칠 때
- 부모와 자손을 분리하는 컨텐츠 없는 경우 ➡️ 부모 블록에
border,padding,content가 없음 - 부모의
margin-bottom과 자손의margin-bottom을 분리할height,min-height,max-height가 존재하지 않는 경우
- 부모와 자손을 분리하는 컨텐츠 없는 경우 ➡️ 부모 블록에
-
빈 요소의 상하 마진이 겹칠 때
border,padding,content,height,min-height,max-height가 존재하지 않는 경우 ➡️ 블록의margin-top과margin-bottom이 서로 상쇄
✔️ 해결 방법
1. overflow: hidden
부모 요소의 속성 값으로 overflow: hidden을 주면 깔끔하게 해결된다.
새로운 블록 포맷 컨텍스트가 부모 요소 기준에서 만들어지면서 부모 요소와 자식 요소의 margin이 분리되어, 자식 요소의 margin이 부모 요소의 안에서 새로 시작할 수 있는 것이다.
따라서 새로운 블록 포맷 컨텍스트에 있는 자식 요소들과 부모 요소의 margin을 분리할 수 있다.
❗️ 자식 끼리는 같은 블록 포맷 컨텍스트를 가지므로 분리되지 않음
2. display: inline-block
마진 상쇄는 블록 요소에서만 발생되므로 inline-block을 주면 자연스레 사라진다.
-
부모 요소에
display: inline-block
: 부모와 자식 간의 마진 병합 현상 사라짐 -
자식 요소에
display: inline-block
: 자식끼리의 마진 병합 현상 사라짐
❗️ 부모 요소에 적용할 경우 자식 요소에 존재하는 모든 마진 병합 현상이 사라지므로 주의 하자!
❗️ 부모 요소에만 주고싶다면 overflow: hidden
3. display: flex / grid
부모 요소에 display: flex나 grid를 주면, 마진상쇄는 해결되지만 경우에 따라서 박스 레이아웃이 변동될 수 있으므로 주의해야한다.
4. 경계를 만든다.
이 경우는 부모와 자식 요소 사이에 마진 병합이 일어난 경우에 적용하는 것이다.
부모 요소와 자식 요소 사이에 border, padding, content가 있다면 마진 병합이 발생하지 않는다.
