Foundation

Spacing

2px 단위 간격 변수와 컨트롤 밀도를 분리해 화면 크기가 바뀌어도 구조를 유지합니다.

Token 살펴보기

컴포넌트의 안쪽 여백과 요소 사이 간격에 쓰는 토큰입니다.

간격 스케일

간격 토큰의 크기를 비교합니다. 막대는 가장 큰 토큰을 기준으로 비율을 나타내며, px는 기본 글꼴 크기 16px 기준입니다.

17개 토큰

--space-0

00px

--space-1

0.125rem2px

--space-2

0.25rem4px

--space-3

0.375rem6px

--space-4

0.5rem8px

--space-5

0.625rem10px

--space-6

0.75rem12px

--space-7

0.875rem14px

--space-8

1rem16px

--space-9

1.125rem18px

--space-10

1.25rem20px

--space-11

1.5rem24px

--space-12

1.75rem28px

--space-13

2rem32px

--space-14

2.5rem40px

--space-15

3rem48px

--space-16

4rem64px

권장하는 사용

피해야 할 사용