패딩

패딩 (Padding)

요소의 안쪽 여백인 패딩을 정하는 유틸리티예요. CSS의 padding 속성을 조절해 요소 안쪽과 콘텐츠 사이의 공간을 제어해요.

출처: 문서

본문

클래스와 스타일

p-<number> — padding: calc(var(--spacing) * <number>);
p-px — padding: 1px;
p-(<custom-property>) — padding: var(<custom-property>);
p-[<value>] — padding: <value>;
px-<number> — padding-inline: calc(var(--spacing) * <number>);
px-px — padding-inline: 1px;
px-(<custom-property>) — padding-inline: var(<custom-property>);
px-[<value>] — padding-inline: <value>;
py-<number> — padding-block: calc(var(--spacing) * <number>);
py-px — padding-block: 1px;
py-(<custom-property>) — padding-block: var(<custom-property>);
py-[<value>] — padding-block: <value>;
ps-<number> — padding-inline-start: calc(var(--spacing) * <number>);
ps-px — padding-inline-start: 1px;
ps-(<custom-property>) — padding-inline-start: var(<custom-property>);
ps-[<value>] — padding-inline-start: <value>;
pe-<number> — padding-inline-end: calc(var(--spacing) * <number>);
pe-px — padding-inline-end: 1px;
pe-(<custom-property>) — padding-inline-end: var(<custom-property>);
pe-[<value>] — padding-inline-end: <value>;
pbs-<number> — padding-block-start: calc(var(--spacing) * <number>);
pbs-px — padding-block-start: 1px;
pbs-(<custom-property>) — padding-block-start: var(<custom-property>);
pbs-[<value>] — padding-block-start: <value>;
pbe-<number> — padding-block-end: calc(var(--spacing) * <number>);
pbe-px — padding-block-end: 1px;
pbe-(<custom-property>) — padding-block-end: var(<custom-property>);
pbe-[<value>] — padding-block-end: <value>;
pt-<number> — padding-top: calc(var(--spacing) * <number>);
pt-px — padding-top: 1px;
pt-(<custom-property>) — padding-top: var(<custom-property>);
pt-[<value>] — padding-top: <value>;
pr-<number> — padding-right: calc(var(--spacing) * <number>);
pr-px — padding-right: 1px;
pr-(<custom-property>) — padding-right: var(<custom-property>);
pr-[<value>] — padding-right: <value>;
pb-<number> — padding-bottom: calc(var(--spacing) * <number>);
pb-px — padding-bottom: 1px;
pb-(<custom-property>) — padding-bottom: var(<custom-property>);
pb-[<value>] — padding-bottom: <value>;
pl-<number> — padding-left: calc(var(--spacing) * <number>);
pl-px — padding-left: 1px;
pl-(<custom-property>) — padding-left: var(<custom-property>);
pl-[<value>] — padding-left: <value>;

기본 예제

p-<number> 유틸리티(예: p-4, p-8)를 쓰면 요소의 모든 면에 패딩을 적용할 수 있어요.

<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>

논리 속성 사용하기

ps-<number> 또는 pe-<number> 유틸리티(예: ps-4, pe-8)를 쓰면 padding-inline-start와 padding-inline-end 논리 속성을 설정해요. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽 면에 매핑돼요.

<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 수식어를 사용해 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있어요.

pbs-<number>와 pbe-<number> 유틸리티를 쓰면 padding-block-start와 padding-block-end 논리 속성을 설정해요. 이 속성들은 쓰기 모드(writing mode)에 따라 위쪽 또는 아래쪽 면에 매핑돼요.

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

커스텀 값 사용하기

p-[<value>], px-[<value>], pb-[<value>] 같은 유틸리티를 쓰면 완전히 커스텀한 값으로 패딩을 정할 수 있어요.

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

CSS 변수를 쓸 때는 p-(<custom-property>) 문법도 사용할 수 있어요.

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

이건 p-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

padding 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

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

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

테마 커스터마이징

p-<number>, px-<number>, py-<number>, ps-<number>, pe-<number>, pbs-<number>, pbe-<number>, pt-<number>, pr-<number>, pb-<number>, pl-<number> 유틸리티는 --spacing 테마 변수에 의해 제어되며, 이 변수는 자신의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일을 커스터마이즈하는 방법은 theme variable 문서에서 더 알아보세요.

패딩