Spacing

간격은 자리에 맞는 이름으로 골라요. 이름의 자리가 아니거나 다른 크기가 필요하면 숫자 스케일을 써요. 원하는 간격이 없으면 추가 가이드를 보고 바꾸거나 더하세요.

사용 예시

이름이 붙은 간격

빗금이 간격이에요. 가로와 세로 모두 자리에 맞는 이름을 써요. gutter는 화면 둘레라서 양쪽에 있어요.

tight

4px

stack

16px

block

32px

section

48px

gutter

양쪽 16px

tsx

<div className="flex flex-col gap-tight">…</div><div className="flex flex-col gap-stack">…</div><div className="flex flex-col gap-block">…</div><div className="flex flex-col gap-section">…</div><div className="flex items-center gap-tight">…</div><div className="px-gutter">…</div>

겹쳐 쓰기

안쪽 그룹일수록 좁아요. 라벨과 Input 사이 4px는 Field에 들어 있어요.

주문

배송 정보를 확인해요.

배송지

받는 분 정보예요.

tsx

<div className="flex flex-col gap-section">  <header className="flex flex-col gap-tight">    <p className="text-title">주문</p>    <p className="text-prose text-fg-muted">배송 정보를 확인해요.</p>  </header>  <div className="flex flex-col gap-block">    <div className="flex flex-col gap-tight">      <p className="text-subsection">배송지</p>      <p className="text-caption text-fg-muted">받는 분 정보예요.</p>    </div>    <form className="flex flex-col gap-stack">      <Field>…</Field>      <Field>…</Field>    </form>  </div></div>

둘레

폭을 정하는 컨테이너에만 줘요.

tsx

<div className="mx-auto w-full max-w-320 px-gutter">…</div>

숫자 스케일

이름의 자리가 아니거나 크기를 다르게 두고 싶을 때 써요. 1이 4px이고 0.5 단위로 적어요.

gap-0.5

2px

gap-1

4px

gap-1.5

6px

gap-2

8px

gap-3

12px

gap-4

16px

gap-6

24px

gap-8

32px

tsx

<div className="flex gap-2">…</div><div className="flex flex-col gap-1">…</div><div className="px-3 py-1.5">…</div>

그룹 사이

발송 완료

1204건을 보냈어요

건너뛴 것

주소가 없는 12건

권장

제목을 가진 그룹 사이는 32px예요.

발송 완료

1204건을 보냈어요

건너뛴 것

주소가 없는 12건

지양

16px이면 제목이 앞 그룹에 붙어 보여요.

제목이 속한 곳

발송 완료

주문 수

1216

권장

제목과 내용을 함께 감싸면 제목이 내용에 붙어 보여요.

발송 완료

주문 수

1216

지양

한 flex에 나란히 두면 제목이 어느 쪽에도 붙지 않아요.

gap과 margin

권장

부모가 gap으로 줘요. 자식이 사라져도 빈 곳이 남지 않아요.

지양

자식의 margin은 옮기거나 지울 때마다 어긋나요. space-y도 margin이에요.

추가 가이드

값 바꾸기

전역 CSS에 적어요. gap-stack, p-stack처럼 그 이름을 쓰는 클래스가 전부 바뀌어요.

css

@import "tailwindcss";@import "@pantoia/ui/tailwind.css";@theme {  --spacing-stack: 20px;}

새 값 더하기

gap-inline, p-inline처럼 간격 클래스가 그 이름으로 생겨요.

css

@theme {  --spacing-inline: 8px;}

명세

간격

화면 크기에 따라 바뀌지 않아요.

간격
이름	값	설명
요소 사이
gap-tight	4px	라벨과 Input, 제목과 설명, 아이콘과 글자
gap-stack	16px	필드끼리, 목록 항목끼리
gap-block	32px	제목을 가진 그룹 사이
gap-section	48px	화면 최상위 그룹 사이
컨테이너
px-gutter	16px	화면 좌우 가장자리