일반적인 가로쓰기의 블록 배치에서는 맞닿은 위아래 margin이 하나로 합쳐질 수 있다. 이를 마진 상쇄라고 한다. 여백에 적은 두 숫자가 그대로 더해지지 않아도 CSS가 고장 난 것은 아니다.
- 아래 예제에서 두 문단의 위아래 마진은 각각
24px이다. 문단 사이 간격은48px이 아니라24px이다. - 음수 마진이 끼면 계산이 달라진다. 양수 중 가장 큰 값과 음수 중 가장 작은 값을 더하며, 모두 음수라면 가장 작은 값을 쓴다.
- 부모와 첫째·마지막 자식 사이에서도 조건에 따라 합쳐진다. 부모의 배경 밖으로 여백이 나간 것처럼 보일 수 있다.
- 플렉스·그리드 항목 사이에는 마진 상쇄가 없다. 간격을 명시적으로 관리할 때는 항목의 마진을 없애고
gap을 정할 수 있다.
작은 예제
아래 코드를 UTF-8 형식의 example-06.html로 저장해 웹 브라우저에서 연다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>여백이 더해지지 않는 까닭</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
section { border: 1px solid; margin-block: 1rem; padding: 1rem; }
p { margin: 24px 0; }
.spaced { display: grid; gap: 24px; }
.spaced p { margin: 0; }
</style>
</head>
<body>
<main>
<h1>여백이 더해지지 않는 까닭</h1>
<section class="normal" aria-label="일반 배치">
<p>첫 번째 문단</p><p>두 번째 문단</p>
</section>
<section class="spaced" aria-label="그리드 배치">
<p>첫 번째 문단</p><p>두 번째 문단</p>
</section>
</main>
</body>
</html>두 구획 모두 문단 사이에는 24px의 간격이 생기지만 계산 방식과 구획 가장자리의 여백이 다르다. 여백만을 위한 빈 HTML 요소를 끼우기보다 박스 모델과 배치 방식을 확인한다. 부모와 자식의 마진 경계를 다루는 블록 서식 맥락은 형제 문단 사이의 상쇄와 구분해서 살핀다.