Spacing

SPI의 레이아웃 시스템은 px 값을 토큰 키로 직접 사용하며, 모든 간격/크기 값은 디자인 스펙에 맞춰 설계되었습니다.

---

Spacing Scale

토큰 키가 곧 px 값입니다.

---

Usage Examples

Spacing 토큰은 Tailwind의 간격 관련 유틸리티(p, m, gap, top 등)를 통해 바로 사용할 수 있습니다.

Padding (내부 여백)

p-*, px-*, py-* 유틸리티를 사용하여 컴포넌트 내부의 여백을 지정합니다. 파란 점선 안쪽 배경이 패딩을 나타냅니다.

Margin (외부 여백)

m-*, mx-*, my-* 유틸리티를 사용하여 컴포넌트 외부의 여백을 지정합니다. 회색 배경 레이어가 부모 컨테이너를 나타냅니다.

Gap (요소 간 여백)

flex 및 grid 컨테이너 안에서 자식 요소들 사이의 간격을 지정할 때 gap-*을 사용합니다. 파란 배경은 gap이 적용된 빈 공간을 보여주기 위한 부모 컨테이너(flex)입니다.

Space Between (자식 요소 간 여백)

수직/수평 리스트 형태로 자식 요소들을 나열할 때 space-y-* 또는 space-x-* 유틸리티를 사용합니다. 컨테이너에 flex/grid를 선언하지 않아도 첫 요소를 제외한 형제 요소들에 여백이 들어갑니다.