여백을 “적당히” 준다는 말은 대개 네 가지 서로 다른 일을 뭉뚱그린 것이다. 바깥을 미는 일, 안을 넓히는 일, 사이를 벌리는 일, 단과 단을 떼는 일. 이름이 다른 데는 이유가 있다.
바깥과 안
margin은 요소 바깥을 민다. 그래서 이웃과의 관계를 정한다. padding은 안을 넓힌다. 그래서 내용과 테두리의 관계를 정한다. 이 둘을 섞어 쓰면 배경색을 넣는 순간 어긋난다. 배경이 있는 상자에서 안쪽 숨통은 언제나 padding의 몫이다.
세로로 이어지는 글에서 margin은 겹친다. 위 요소의 아래 여백과 아래 요소의 위 여백 중 큰 쪽만 남는다. 이 규칙을 모르면 40과 40을 줘 놓고 왜 80이 아니냐고 묻게 된다.
사이와 단
gap은 flex와 grid에서 자식들 사이만 벌린다. 바깥에는 여백을 만들지 않는다. 목록을 만들 때 마지막 항목만 여백이 남는 문제가 사라지는 이유다. 되도록 자식에 margin을 걸지 말고 부모에 gap을 걸어야 하는 이유이기도 하다.
gutter는 단과 단 사이다. 인쇄에서 온 말이고, 화면에서는 grid의 열 간격이 그 역할을 한다. 6단 격자를 쓴다면 거터는 한 번만 정하고 끝까지 바꾸지 않는다. 거터가 흔들리면 격자는 격자가 아니다.
여백은 남은 자리가 아니라 정해 둔 자리다.
판형 편집부
하나로 묶는 법
네 단위를 하나의 기준 수에서 파생시키면 화면이 조용해진다. 기준을 4px로 두고 4·8·12·16·24·32·48·64만 쓰는 식이다. 22px이나 27px 같은 수가 끼어드는 순간, 그 화면은 누가 봐도 어긋나 보인다. 이유를 짚지 못할 뿐이다.
