AAtomic CSS

padding-right

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

pr 중의어 주의

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

클래스CSS구분 기준
prposition: relative단위 없이 단독 사용
pr16pxpadding-right: 16px숫자 + 단위가 붙으면 padding-right
pr2rempadding-right: 2rem숫자 + 단위가 붙으면 padding-right

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

클래스 패턴

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

클래스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 }

크기px 클래스rem 클래스
8pxpr8pxpr0-8rem
12pxpr12pxpr1-2rem
16pxpr16pxpr1-6rem
20pxpr20pxpr2rem
24pxpr24pxpr2-4rem
32pxpr32pxpr3-2rem

자주 쓰는 값

클래스실제 크기용도
pr8px8px입력 필드 오른쪽 여백
pr12px12px테이블 셀 오른쪽 간격
pr16px16px카드 오른쪽 내부 간격
pr2rem20px컨테이너 오른쪽 여백

코드 예시

<!-- pr 단독 vs pr + 단위 구분 -->
<div class="pr">position: relative</div>
<div class="pr16px">padding-right: 16px</div>
<div class="pr2rem">padding-right: 2rem (20px)</div>

<!-- 아이콘이 있는 입력 필드 -->
<div class="pr">
  <input type="text" class="w100p py8px pl12px pr4rem" placeholder="검색..." />
  <svg class="pa r12px t50p" width="16" height="16">...</svg>
</div>

<!-- 비대칭 카드 padding -->
<div class="pt16px pr2-4rem pb16px pl16px bg18181B br8px">
  오른쪽에만 넓은 패딩 (아이콘 영역 확보)
</div>

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