padding
요소 내부의 간격을 설정하는 속성입니다. 방향별 접두사(pt, pr, pb, pl)로 개별 제어하거나, Atomic CSS 전용 축약인 px(좌우)와 py(상하)로 편리하게 지정합니다.
클래스 목록
접두사 뒤에 단위 포함 값을 붙여 사용합니다. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| 접두사 | CSS 속성 | 예시 | CSS 출력 |
|---|---|---|---|
p | padding | p16px | padding: 16px |
p | padding | p2rem | padding: 2rem (20px) |
pt | padding-top | pt8px | padding-top: 8px |
pr | padding-right | pr16px | padding-right: 16px |
pb | padding-bottom | pb2-4rem | padding-bottom: 2.4rem (24px) |
pl | padding-left | pl4rem | padding-left: 4rem (40px) |
px | padding-left + padding-right | px16px | padding-left: 16px; padding-right: 16px |
py | padding-top + padding-bottom | py8px | padding-top: 8px; padding-bottom: 8px |
p | padding (% 단위) | p5p | padding: 5% |
pt | padding-top (em) | pt1em | padding-top: 1em |
px / py — 수평 / 수직 축약
px와 py는 표준 CSS에는 없는 Atomic CSS 전용 축약입니다. 좌우 또는 상하 padding을 한번에 지정하여, 두 클래스를 쓸 필요 없이 하나로 처리합니다.
| 클래스 | CSS 출력 | 동일한 개별 클래스 |
|---|---|---|
px8px | padding-left: 8px; padding-right: 8px | pl8px pr8px |
px16px | padding-left: 16px; padding-right: 16px | pl16px pr16px |
px2rem | padding-left: 2rem; padding-right: 2rem | pl2rem pr2rem |
py4px | padding-top: 4px; padding-bottom: 4px | pt4px pb4px |
py12px | padding-top: 12px; padding-bottom: 12px | pt12px pb12px |
py4rem | padding-top: 4rem; padding-bottom: 4rem | pt4rem pb4rem |
<!-- px: 좌우 동시 적용 -->
<div class="px2rem">좌우 20px padding</div>
<!-- 위와 동일: -->
<div class="pl2rem pr2rem">좌우 20px padding</div>
<!-- py: 상하 동시 적용 -->
<div class="py4rem">상하 40px padding</div>
<!-- 위와 동일: -->
<div class="pt4rem pb4rem">상하 40px padding</div>
<!-- px + py 조합 (버튼) -->
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Button
</button>px / py 시각적 비교
px2rem (좌우 20px)
py2rem (상하 20px)
px16px py8px (버튼 패턴)
px2rem py4rem (섹션 패턴)
단위 비교
동일한 간격을 px, rem, %, em으로 표현하는 예시입니다. 기준: html { font-size: 10px }
| 간격 | px | rem | % | em |
|---|---|---|---|---|
| 8px | p8px | p0-8rem | p1p | p0-8em |
| 12px | p12px | p1-2rem | p2p | p1-2em |
| 16px | p16px | p1-6rem | p3p | p1-6em |
| 20px | p20px | p2rem | p5p | p2em |
| 32px | p32px | p3-2rem | p8p | p3-2em |
| 40px | p40px | p4rem | p10p | p4em |
시각적 비교
padding 값에 따라 요소 내부 간격이 어떻게 변하는지 확인합니다.
padding: 0 (기본) —
padding 없음. 콘텐츠가 가장자리에 밀착
padding: 4px — p4px
최소 간격. 태그, 뱃지에 사용
padding: 8px — p8px
좁은 내부 간격. 작은 카드, 인풋
padding: 16px — p16px
기본적인 내부 간격. 카드, 컨테이너
padding: 2rem (20px) — p2rem
넉넉한 간격. 섹션, 모달
padding: 4rem (40px) — p4rem
넓은 간격. 히어로, 랜딩 섹션
자주 쓰는 패턴
실무에서 반복적으로 사용하는 padding 조합입니다.
<!-- 버튼 사이즈별 -->
<button class="py4px px8px bg6366F1 cFFFFFF br4px bn cp fs13px">Small</button>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp fs14px">Medium</button>
<button class="py12px px2-4rem bg6366F1 cFFFFFF br8px bn cp fs16px">Large</button>
<!-- 카드 컴포넌트 -->
<div class="p2rem bg18181B br8px">
<h3 class="mb8px">카드 제목</h3>
<p>카드 내용. 모든 방향에 동일한 20px 간격</p>
</div>
<!-- 섹션 (상하 넓게, 좌우 기본) -->
<section class="py4rem px2rem">
<h2 class="mb16px">섹션 제목</h2>
<p>상하 40px, 좌우 20px</p>
</section>
<!-- bxzbb와 함께 사용 -->
<div class="w100p p2rem bxzbb">
padding이 width 안에 포함됨 (100% 유지)
</div>패턴별 실제 모습
버튼 — py8px px16px
카드 — p2rem
카드 제목
p2rem으로 동일한 내부 간격
카드 제목
py2rem px2-4rem으로 좌우를 더 넓게
섹션 — py4rem px2rem
섹션 콘텐츠
상하 40px, 좌우 20px
| 패턴 | 클래스 | 용도 |
|---|---|---|
| 작은 버튼 | py4px px8px | 뱃지, 태그, 작은 버튼 |
| 기본 버튼 | py8px px16px | 일반적인 버튼, 링크 버튼 |
| 큰 버튼 | py12px px2-4rem | CTA, 주요 액션 버튼 |
| 카드 | p2rem | 카드 컴포넌트 내부 간격 |
| 섹션 | py4rem px2rem | 페이지 섹션 상하 넓은 간격 + 좌우 기본 간격 |
| 컨테이너 | px2rem | 좌우 여백만 필요한 래퍼 |
| 리스트 아이템 | py12px px16px | 테이블 셀, 리스트 항목 |
| 인풋 | py8px px12px | 텍스트 입력 필드 내부 간격 |
팁 & 주의사항
px / py는 Atomic CSS 전용 축약
px16px는 pl16px pr16px과 동일하고, py8px는 pt8px pb8px와 동일합니다. CSS에는 padding-x 속성이 없지만, Atomic CSS에서 편의를 위해 제공하는 축약입니다.
음수 padding은 없다
margin과 달리 padding은 음수 값을 사용할 수 없습니다. neg-p 같은 클래스는 존재하지 않습니다. 요소를 겹치거나 당기려면 neg-m(음수 margin)을 사용하세요.
padding은 박스 크기에 영향
기본적으로 padding은 요소의 전체 크기를 늘립니다. w100px p16px이면 실제 너비는 132px가 됩니다. bxzbb(box-sizing: border-box)를 사용하면 padding이 width 안에 포함되어 100px를 유지합니다.
4의 배수 사용
일관된 리듬을 위해 padding 값은 4의 배수를 사용하세요: 4px, 8px, 12px, 16px, 2rem(20px), 2-4rem(24px), 3-2rem(32px), 4rem(40px)