margin: 0 을 줬는데 표 두 개 사이가 안 붙는 이유 — flex gap

간격을 없애려고 margin-top: 0 을 줬는데 화면이 그대로일 때가 있다. 2026-08-24 에 내가 그랬다.

인쇄용 A4 보고서 화면이었다. 출결부 위에 정보표 하나, 그 아래 통계 상자 하나 — 표 두 개 사이 간격을 없애 달라는 요청을 받았다. <table className="sum2"> 에 margin-top: 1.8mm 가 걸려 있길래 그걸 0 으로 바꿨다. 빌드하고 화면을 열었다. 간격이 그대로 남아 있었다.

값은 적용되고 있었다

먼저 캐시를 의심했다. 새로고침을 몇 번 했고, 안 없어졌다.

그다음엔 margin-top: 0 이 다른 규칙에 밀렸나 싶어 CSS 우선순위를 봤다. 문제없었다. 값은 정확히 적용되고 있었는데 간격만 그대로였다.

원인은 표가 아니라 그 부모에 있었다. 두 표를 감싸는 <section> 이 이렇게 짜여 있었다.

display: flex;
flex-direction: column;
gap: 2.8mm;

그 표 두 개는 flex 컨테이너의 직속 자식이었다. gap 은 자식들 사이에 부모가 직접 끼워 넣는 여백이라, 자식 쪽 margin 으로는 지울 수가 없다. margin 은 그 요소 자신의 바깥 여백이고 gap 은 부모가 자식과 자식 사이에 넣는 여백이다 — 서로 다른 자리에서 작동한다. 그래서 margin-top: 0 이 제대로 먹었는데도 화면은 안 변했다.

div 로 묶었더니 다른 게 틀어졌다

임시방편으로 두 표를 <div> 하나로 묶었다. 묶으면 flex 자식이 하나가 되고, 그 안쪽에는 gap 이 안 걸리니 간격은 사라졌다.

대신 다른 게 나왔다. 표가 여전히 둘이라 각자 열 너비를 따로 계산했고, 위아래 표의 세로줄이 서로 어긋나 보였다. 간격 하나 없애려다 정렬을 잃었다.

표를 하나로 만들었다

진짜 처방은 간격을 없애는 게 아니라 애초에 표를 하나로 만드는 것이었다. 두 번째 표의 두 줄을 첫 번째 표의 <tbody> 안에 그대로 옮겨 붙였다. 표가 하나면 모든 행이 같은 열 너비를 공유한다. 간격 문제와 정렬 문제가 같이 없어졌다.

돌이켜 보면 순서가 거꾸로였다. margin 을 만지고, div 로 감싸고, 그다음에야 「그냥 한 표에 줄을 더 넣으면 되잖아」에 닿았다. 세 번 돌아갔다.

자식 margin 이 안 먹으면 부모가 flex 인지 본다.

그리고 하나 더. 표 두 개를 붙이려는 순간은, 왜 두 개인지 물어볼 자리다.