AAtomic CSS

padding-right

요소 오른쪽의 내부 간격을 설정합니다. 접두사 pr 뒤에 단위 포함 값을 붙여 사용합니다. 콘텐츠와 오른쪽 경계 사이 여백, 스크롤바 보상 등에 활용됩니다.

pr 중의어 주의

pr은 두 가지 의미를 가집니다

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS구분 기준
prposition: relativeUsed alone without unit
pr16pxpadding-right: 16pxWith number + unit, it becomes padding-right
pr2rempadding-right: 2remWith number + unit, it becomes padding-right

pr 단독 = position: relative, pr{숫자}{단위} = padding-right. 숫자와 단위 유무로 구분됩니다.

클래스 패턴

접두사 pr + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS 출력설명
pr4pxpadding-right: 4px최소 간격
pr8pxpadding-right: 8px좁은 간격
pr12pxpadding-right: 12px기본 간격
pr16pxpadding-right: 16px넉넉한 간격
pr2rempadding-right: 2rem (20px)rem 단위 시작점
pr2-4rempadding-right: 2.4rem (24px)소수점은 하이픈으로 표기
pr3-2rempadding-right: 3.2rem (32px)넓은 간격
prapadding-right: auto자동 패딩 (일부 레이아웃 컨텍스트)

단위 비교

동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기px 클래스rem 클래스
8pxpr8pxpr0-8rem
12pxpr12pxpr1-2rem
16pxpr16pxpr1-6rem
20pxpr20pxpr2rem
24pxpr24pxpr2-4rem
32pxpr32pxpr3-2rem

자주 쓰는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스실제 크기용도
pr8px8pxInput field right margin
pr12px12pxTable cell right gap
pr16px16pxCard inner right gap
pr2rem20pxContainer right margin

코드 예시

<!-- pr alone vs pr + unit distinction -->
<div class="pr">position: relative</div>
<div class="pr16px">padding-right: 16px</div>
<div class="pr2rem">padding-right: 2rem (20px)</div>

<!-- Input field with icon -->
<div class="pr">
  <input type="text" class="w100p py8px pl12px pr4rem" placeholder="Search..." />
  <svg class="pa r12px t50p" width="16" height="16">...</svg>
</div>

<!-- Asymmetric card padding -->
<div class="pt16px pr2-4rem pb16px pl16px bg18181B br8px">
  Wider padding only on the right (reserve icon area)
</div>

<!-- Apply left/right simultaneously with px -->
<div class="px2rem py16px bg18181B br8px">
  px2rem = pl2rem + pr2rem
</div>

팁 & 주의사항

px로 좌우 동시 적용

좌우 padding이 동일하면 px16px로 pl16px pr16px을 한번에 적용할 수 있습니다.

pr과 position: relative 혼동 주의

pr 단독은 position: relative입니다. padding-right를 적용하려면 반드시 숫자와 단위를 붙여야 합니다: pr16px, pr2rem.

paddingpadding-leftmargin-right