여백 이해하기: margin·padding·gap

제목과 글 사이가 너무 붙어 있거나, 카드 안쪽이 답답해 보이거나, 나란히 놓인 칸 사이가 좁아 보일 때가 있습니다. 모두 "여백" 문제처럼 보이지만 편집기에서는 바깥 여백(margin), 안쪽 여백(padding), 자식 간격(gap)이라는 세 가지로 나뉘어 있고, 어떤 것을 바꾸느냐에 따라 달라지는 곳이 다릅니다. 이 글에서는 세 가지의 차이와 위치, 값을 바꿨을 때 편집 화면이 어떻게 달라지는지 살펴봅니다. 속성 패널의 전체 구조는 별도 글에서, 컨테이너의 크기와 정렬도 별도 글에서 다룹니다.

1. 여백 컨트롤은 어디에 있나요

바꿀 요소를 고르면 요소 가까이에 작은 도구 막대가 나타납니다. 컨테이너는 선택 테두리 오른쪽에 나타나는 점 세 개를 눌러야 막대가 펼쳐지고, 제목과 텍스트는 고르는 즉시 막대가 나옵니다. 막대에서 네모 네 개 모양의 레이아웃 / 간격 아이콘을 누르면 같은 이름의 작은 창이 열립니다. 속성 패널의 스타일 탭에도 같은 항목이 있습니다.

창에는 위에서부터 너비와 높이, 바깥 여백 (MARGIN), 안쪽 여백 (PADDING), 모서리 반경, 자식 간격 (GAP) 순서로 나옵니다. 각 항목은 슬라이더와 숫자 입력칸(px)으로 되어 있어 끌어도 되고 숫자를 직접 써도 됩니다.

2. 세 가지는 무엇이 다른가요

• 바깥 여백: 고른 요소의 바깥쪽, 이웃 요소와의 거리입니다.
• 안쪽 여백: 고른 상자의 테두리와 그 안의 내용 사이 거리입니다. 배경색이 있는 상자라면 색이 칠해진 면적 자체가 달라집니다.
• 자식 간격: 상자가 안쪽 요소들 사이에 만드는 간격입니다. 화면에는 "이 박스가 자식들 사이에 만드는 간격입니다 — 자식의 마진에는 나타나지 않습니다."라고 안내되어 있습니다.

3. 바깥 여백 바꾸기

제목 요소를 골라 바깥 여백을 바꿔 보았습니다. 기본은 0이고, 전체 한 줄에 24를 넣으면 네 방향이 모두 24px가 되어 제목이 안쪽으로 밀리며 카드도 함께 커졌습니다. 아래만 32px로 하면 제목과 문단 사이가 벌어지고, 위만 32px로 하면 제목이 아래로 내려옵니다.

제목 줄 오른쪽에는 작은 아이콘 두 개가 있습니다. 마우스를 올리면 네 방향 같은 값과 상·우·하·좌 개별이라고 나옵니다. 개별을 누르면 위, 우, 아래, 좌 네 줄로 펼쳐져 방향마다 따로 정할 수 있습니다. 바깥 여백 슬라이더는 -80부터 200까지이고, 위를 -20으로 하면 제목이 20px 위로 올라갔습니다.

개별 모드에서는 슬라이더 아래에 "시각 간격 44px (부모 row-gap 12px)" 같은 작은 안내가 나올 수 있습니다. 아래 여백을 32px로 정했는데 눈에 보이는 거리는 44px인 경우, 부모 상자의 자식 간격 12px가 더해져서 그렇다는 뜻입니다.

4. 안쪽 여백 바꾸기

카드를 골라 안쪽 여백을 8, 32, 64px로 바꾸면 카드의 배경색 면적은 그대로 가로로 꽉 차 있고, 안쪽 글자와 버튼이 테두리에서 멀어지면서 카드가 세로로 커집니다. 안쪽 여백은 0부터 400까지 정할 수 있습니다. 같은 방식의 아이콘 한 쌍이 안쪽 여백 제목에도 있습니다.

5. 자식 간격 바꾸기

자식 간격은 카드나 칸 묶음처럼 안쪽 요소를 차례로 배치하는 상자를 골랐을 때 나타납니다. 제목이나 텍스트를 골랐을 때는 이 항목이 보이지 않았습니다. 카드의 간격을 0, 12, 40px로 바꾸면 제목, 문단, 버튼 사이가 함께 달라지고, 나란히 놓인 세 칸짜리 상자에서는 칸 사이의 거리가 달라집니다. 범위는 0부터 120까지입니다.

요소 패널의 컨테이너로 만든 칼럼에는 설정 창에 칼럼 간격 슬라이더가 따로 있습니다. 2열·3열 구성은 별도 글에서 다룹니다.

6. 이렇게 활용해 보세요

• 제목과 설명 사이만 넓히고 싶다면 제목의 아래 여백을 늘려 볼 수 있습니다.
• 카드 안이 답답하게 느껴지면 카드의 안쪽 여백부터 조금씩 늘려 볼 수 있습니다.
• 카드 안 요소 사이를 한꺼번에 고르게 맞추고 싶다면 하나씩 바깥 여백을 주는 대신 카드의 자식 간격을 써 볼 수 있습니다.

7. 알아 두실 점

• 자식 간격을 바꾸려면 안쪽 요소가 아니라 그 요소들을 담은 상자를 골라야 합니다. 안쪽 요소를 고르면 이 항목이 없습니다. 속성 패널 위쪽의 상위 버튼으로 한 단계 위 요소를 고를 수 있습니다.
• 시각 간격 안내는 바깥 여백을 개별 모드로 펼쳤을 때 슬라이더 아래에 나타납니다.
• 이 글의 화면은 모두 편집 화면 기준입니다. 저장한 뒤 새로고침해도 안쪽 여백, 자식 간격, 바깥 여백 값이 유지되는 것은 확인했습니다.

태블릿·모바일 화면에서 여백을 따로 조정하는 방법은 별도 글에서 이어서 다룹니다.