간격

클래스

계열은 속성을 선택하고 토큰은 거리를 제공합니다. px-와 mx-는 인라인 축을 사용하고, pl-와 ml-는 물리적 왼쪽을 사용합니다. 전체 계열 표에서 각각의 네이티브 속성을 확인할 수 있습니다.

값

프리셋 척도는 rem 길이를 사용합니다. 픽셀 환산값은 루트 글꼴 크기가 16px라고 가정하지만 브라우저는 실제 루트 글꼴 크기를 사용합니다. 0이나 1 CSS 픽셀을 지정하려면 p(0), p(1)처럼 값을 직접 받는 함수를 사용하세요.

같은 거리, 다른 경계

p-md와 gap-md는 모두 --spacing-md를 참조하지만, padding은 콘텐츠와 상자 가장자리를 분리하고 gap은 레이아웃 안의 항목들을 분리합니다. gap은 바깥쪽 padding을 만들지 않습니다.

강조된 두 거리는 모두 1rem이며 루트 글꼴 크기 16px를 기준으로 표시합니다. 파란색과 보라색은 확인용 오버레이이며 p-md와 gap-md가 추가하는 색상이 아닙니다.

텍스트 설명

1. 두 예제 모두 Grid와 프리셋 --spacing-md 값인 1rem을 사용합니다. 콘텐츠 행은 같은 타이포그래피와 내부 치수를 사용합니다.
2. 왼쪽 예제에는 p-md가 있고 gap은 없습니다. 파란색 띠는 상자 가장자리 안쪽에서 콘텐츠의 네 면을 둘러쌉니다.
3. 오른쪽 예제에는 gap-md가 있고 padding은 없습니다. 보라색 띠는 두 행 사이에만 있으며 바깥쪽에는 같은 띠가 없습니다.
4. 그림의 루트 글꼴 크기는 16px이므로 강조된 각 거리는 16px입니다. 예제는 실제로 생성한 padding과 gap을 사용하지만 주석 색상과 점선 경계는 유틸리티 출력이 아닙니다.

gap-md는 간격 값만 설정하며 Grid나 Flexbox를 활성화하지 않습니다. 마찬가지로 inset 토큰은 오프셋만 설정하고 위치 지정 방식을 선택하지 않습니다. 실제 효과는 네이티브 속성과 레이아웃에 따라 달라집니다.

음수 토큰 형식의 허용 여부는 사용하는 속성에 따라 다릅니다. -mt-md는 허용되지만 -p-md는 거부됩니다. 프리셋에는 zero 또는 auto 간격 토큰이 없습니다. 0에는 m(0)을, 인라인 축의 자동 마진에는 mx-auto 같은 고정 유틸리티를 사용하세요.

관련 문서: 음수 값, 직접 지정하는 값, 네이티브 gap 동작.

사용 예

폼에 안쪽 여백을 주고, 필드 사이와 각 레이블 및 컨트롤 사이의 간격을 지정합니다.

<form class="… grid gap-md p-md">  <label class="… grid gap-2xs">Name<input class="… px-sm py-xs" value="Aron" /></label>  <label class="… grid gap-2xs">Email<input type="email" class="… px-sm py-xs" value="aron@example.com" /></label></form>

@layer theme {  :root,  :host {    --spacing-2xs: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-md: 1rem  }}@layer utilities {  .grid {    display: grid  }  .gap-2xs {    gap: var(--spacing-2xs)  }  .gap-md {    gap: var(--spacing-md)  }  .p-md {    padding: var(--spacing-md)  }  .py-xs {    padding-block: var(--spacing-xs)  }  .px-sm {    padding-inline: var(--spacing-sm)  }}

사용자 정의

프리셋 값을 변경하거나 토큰을 추가하세요. --spacing-card를 정의하면 p-card, m-card, gap-card 및 다른 간격 클래스가 생성됩니다.

@theme {  --spacing-card: 1.25rem;}

@layer theme {  :root,  :host {    --spacing-card: 1.25rem  }}@layer utilities {  .p-card {    padding: var(--spacing-card)  }}

관련 문서: 테마 지시문, 레이아웃.