CSS에서 세로 margin 상쇄(Margin Collapsing)는 언제 일어나고 어떻게 피할 수 있나요?

이렇게 답해 보세요 (핵심 답변)

세로 margin 상쇄는 일반 블록 흐름에서 위아래로 맞닿은 인접 형제나 경계가 없는 부모·자식의 세로 margin이 각각 더해지지 않고 하나로 합쳐지는 현상입니다. 양수끼리 만나면 더 큰 값이 남고 음수가 섞이면 계산이 달라져서 예상보다 간격이 줄어들거나 자식 여백이 부모 바깥으로 튀어나올 수 있습니다. 이를 피하려면 부모에 padding·border나 display: flow-root로 경계를 만들거나, Flexbox·Grid 컨테이너의 gap 속성으로 간격을 관리합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 양수 margin끼리 만나면 둘 중 더 큰 값 하나만 남고, 양수와 음수가 섞이면 가장 큰 양수에서 가장 작은(절댓값이 큰) 음수를 더한 값으로 계산됩니다.
2. Flexbox, Grid, position: absolute, float 요소들은 일반 블록 흐름과 다른 서식 맥락을 가지므로 인접 요소와 세로 margin이 상쇄되지 않습니다.

면접에서 자주 하는 실수

세로 방향뿐 아니라 좌우 가로 방향의 margin까지 서로 만나면 상쇄된다고 잘못 설명하지 않도록 주의합니다.