padding-right
요소 오른쪽의 내부 간격을 설정합니다. 접두사 pr 뒤에 단위 포함 값을 붙여 사용합니다. 콘텐츠와 오른쪽 경계 사이 여백, 스크롤바 보상 등에 활용됩니다.
pr 중의어 주의
pr은 두 가지 의미를 가집니다
| 클래스 | CSS | 구분 기준 |
|---|---|---|
pr | position: relative | 단위 없이 단독으로 사용 |
pr16px | padding-right: 16px | 숫자 + 단위를 붙이면 padding-right |
pr2rem | padding-right: 2rem | 숫자 + 단위를 붙이면 padding-right |
pr 단독 = position: relative, pr{숫자}{단위} = padding-right. 숫자와 단위 유무로 구분됩니다.
클래스 패턴
접두사 pr + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| 클래스 | CSS 출력 | 설명 |
|---|---|---|
pr4px | padding-right: 4px | 최소 간격 |
pr8px | padding-right: 8px | 좁은 간격 |
pr12px | padding-right: 12px | 기본 간격 |
pr16px | padding-right: 16px | 넉넉한 간격 |
pr2rem | padding-right: 2rem (20px) | rem 단위 시작점 |
pr2-4rem | padding-right: 2.4rem (24px) | 소수점은 하이픈으로 표기 |
pr3-2rem | padding-right: 3.2rem (32px) | 넓은 간격 |
단위 비교
동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }
| 크기 | px 클래스 | rem 클래스 |
|---|---|---|
| 8px | pr8px | pr0-8rem |
| 12px | pr12px | pr1-2rem |
| 16px | pr16px | pr1-6rem |
| 20px | pr20px | pr2rem |
| 24px | pr24px | pr2-4rem |
| 32px | pr32px | pr3-2rem |
자주 쓰는 값
| 클래스 | 실제 크기 | 용도 |
|---|---|---|
pr8px | 8px | 입력 필드 오른쪽 여백 |
pr12px | 12px | 테이블 셀 오른쪽 간격 |
pr16px | 16px | 카드 내부 오른쪽 간격 |
pr2rem | 20px | 컨테이너 오른쪽 여백 |
패딩이 보이는 상자
바깥 상자에 padding-right만 주고, 안쪽 파란 상자는 그대로 뒀습니다. 오른쪽에만 생기는 옅은 띠가 바로 padding-right입니다.
pr16px
16px. 뒤쪽 아이콘이 붙는 행에 적당합니다.
pr2rem
20px. 작은 버튼이나 아이콘 자리를 비울 때 적당합니다.
pr4rem
40px. 절대 위치로 겹쳐 놓은 버튼 자리를 비울 때 씁니다.
패딩은 테두리 안쪽 공간입니다
패딩은 배경색이 칠해지는 영역 안쪽에 생깁니다. 그래서 상자 배경이 패딩까지 함께 칠해지고, 마진과 달리 바깥 요소를 밀어내지 않습니다.
클래스별 상세
pr16pxpadding-right: 16px
행 오른쪽 끝의 기본 여백입니다. 뒤쪽 화살표나 상태 표시가 테두리에 붙지 않게 합니다.
언제 쓰나
목록 행, 표 셀, 이동 링크처럼 오른쪽 끝에 요소가 놓이는 곳에 씁니다.
<!-- Row with a trailing chevron that needs breathing room -->
<a class="df aic jcsb py12px pl16px pr16px bb1pxsolid27272A tdn">
<span class="fs14px cFAFAFA">Account settings</span>
<span class="fs14px c71717A">to-r</span>
</a>pr2rempadding-right: 2rem
20px. 입력 필드 안에 작은 아이콘 버튼 하나가 들어갈 만한 크기입니다.
언제 쓰나
지우기 버튼이나 표시 토글이 겹쳐 놓인 입력 필드에서 글자가 버튼 밑으로 흘러 들어가지 않게 할 때 씁니다.
<!-- Input that leaves room for a clear button -->
<div class="pr">
<input type="text" class="w100p py8px pl12px pr2rem br8px b1pxsolid27272A" />
<button class="pa t0 r0 h100p px8px bgn bn cp c71717A fs12px">x</button>
</div>pr4rempadding-right: 4rem
40px. 닫기 버튼이나 짧은 텍스트 버튼 하나가 들어갈 만한 크기입니다.
언제 쓰나
절대 위치로 배치한 버튼이 본문 위에 겹쳐 있을 때, 그 폭만큼 본문 영역을 미리 비워 두는 용도로 씁니다. 값은 버튼 폭과 여백의 합에 맞추세요.
<!-- Card with an absolutely positioned close button -->
<div class="pr p2rem pr4rem bg18181B b1pxsolid27272A br8px">
<p class="fs14px cFAFAFA lh1-7">
The text stops before the button instead of running under it.
</p>
<button class="pa t16px r16px w2rem h2rem br4px bg27272A cFAFAFA bn cp">x</button>
</div>코드 예시
<!-- 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>오른쪽에 버튼이 고정된 검색 입력입니다. 입력값이 버튼 아래로 숨지 않도록 버튼 영역만큼 오른쪽 패딩을 확보했습니다.
<!-- Search field with a button pinned to the right -->
<form class="pr w100p maxw50rem">
<!-- 8rem of right padding reserves the button area -->
<input
type="search"
class="w100p py12px pl16px pr8rem fs14px br8px b1pxsolid27272A bg18181B cFAFAFA"
/>
<button class="pa t8px r8px py8px px16px bg6366F1 cFFFFFF br6px bn cp fs14px">
Search
</button>
</form>팁 & 주의사항
px로 좌우 동시 적용
좌우 padding이 동일하면 px16px로 pl16px pr16px을 한번에 적용할 수 있습니다.
pr과 position: relative 혼동 주의
pr 단독은 position: relative입니다. padding-right를 적용하려면 반드시 숫자와 단위를 붙여야 합니다: pr16px, pr2rem.
패딩은 상쇄되지 않습니다
가로 마진은 애초에 상쇄되지 않지만, 패딩은 방향과 무관하게 절대 상쇄되지 않습니다. 부모의 padding-right와 자식의 margin-right는 그대로 더해집니다.
백분율 패딩은 가로 폭 기준입니다
패딩에 백분율을 쓰면 부모의 가로 폭을 기준으로 계산됩니다. 버튼 자리를 비우는 용도라면 폭이 바뀔 때마다 여백도 변하므로 고정 단위를 쓰세요.
RTL을 지원한다면
아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 지원한다면 padding-right는 반대편에 적용됩니다. 방향이 뒤집혀야 하는 여백에는 논리 속성 계열을 검토하세요.