일반적인 가로쓰기의 블록 배치에서는 맞닿은 위아래 `margin`이 하나로 합쳐질 수 있다. 이를 마진 상쇄라고 한다. [[여백]]에 적은 두 숫자가 그대로 더해지지 않아도 CSS가 고장 난 것은 아니다.
- 아래 예제에서 두 문단의 위아래 마진은 각각 `24px`이다. 문단 사이 간격은 `48px`이 아니라 `24px`이다.
- 음수 마진이 끼면 계산이 달라진다. 양수 중 가장 큰 값과 음수 중 가장 작은 값을 더하며, 모두 음수라면 가장 작은 값을 쓴다.
- 부모와 첫째·마지막 자식 사이에서도 조건에 따라 합쳐진다. 부모의 배경 밖으로 여백이 나간 것처럼 보일 수 있다.
- 플렉스·그리드 항목 사이에는 마진 상쇄가 없다. 간격을 명시적으로 관리할 때는 항목의 마진을 없애고 `gap`을 정할 수 있다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-06.html`로 저장해 웹 브라우저에서 연다.
```html
여백이 더해지지 않는 까닭
여백이 더해지지 않는 까닭
```
두 구획 모두 문단 사이에는 `24px`의 간격이 생기지만 계산 방식과 구획 가장자리의 여백이 다르다. 여백만을 위한 빈 HTML 요소를 끼우기보다 [[박스 모델]]과 배치 방식을 확인한다. 부모와 자식의 마진 경계를 다루는 [[블록 서식 맥락]]은 형제 문단 사이의 상쇄와 구분해서 살핀다.
## 참고
- [MDN: 마진 상쇄](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Margin_collapsing)
- [Interneting Is Hard: 박스 모델](https://internetingishard.netlify.app/html-and-css/css-box-model/)
#CSS #웹제작