padding

예제

기본 예제

p-4와 p-8 같은 p-<number> 유틸리티를 사용해 엘리먼트의 모든 면에 패딩을 조절할 수 있습니다.

<div class="p-8 ...">p-8</div>

한쪽에 패딩 추가하기

pt-<number>, pr-<number>, pb-<number>, pl-<number> 유틸리티를 사용해 엘리먼트의 한쪽에 패딩을 조절할 수 있습니다. 예를 들어 pt-6과 pr-4를 사용할 수 있습니다.

<div class="pt-6 ...">pt-6</div><div class="pr-4 ...">pr-4</div><div class="pb-8 ...">pb-8</div><div class="pl-2 ...">pl-2</div>

가로 패딩 추가하기

px-<number> 유틸리티를 사용해 엘리먼트의 가로 패딩을 조절할 수 있습니다. 예를 들어 px-4와 px-8을 사용할 수 있습니다:

<div class="px-8 ...">px-8</div>

세로 패딩 추가하기

py-<number> 유틸리티를 사용해 엘리먼트의 세로 패딩을 조절할 수 있습니다. 예를 들어 py-4나 py-8과 같은 클래스를 사용할 수 있습니다.

<div class="py-8 ...">py-8</div>

논리적 속성 사용하기

padding-inline-start와 padding-inline-end 논리적 속성을 설정하려면 ps-<number>와 pe-<number> 유틸리티를 사용하세요. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑됩니다. 예를 들어, ps-4와 pe-8을 사용할 수 있습니다.

<div>  <div dir="ltr">    <div class="ps-8 ...">ps-8</div>    <div class="pe-8 ...">pe-8</div>  </div>  <div dir="rtl">    <div class="ps-8 ...">ps-8</div>    <div class="pe-8 ...">pe-8</div>  </div></div>

더 세밀한 제어를 원한다면, LTR 및 RTL 수정자를 사용하여 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수 있습니다.

커스텀 값 사용하기

p-[<value>],px-[<value>], 그리고 pb-[<value>]와 같은 유틸리티를 사용하세요 padding를 완전히 커스텀한 값으로 설정하려면:

<div class="p-[5px] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 p-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="p-(--my-padding) ...">  <!-- ... --></div>

이는 p-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a padding 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="py-4 md:py-8 ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pt-<number>,pr-<number>,pb-<number>, and pl-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:

@theme {  --spacing: 1px; }

스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.