padding
요소 내부의 간격을 설정하는 속성입니다. 방향별 접두사(pt, pr, pb, pl)로 개별 제어하거나, Atomic CSS 전용 축약인 px(좌우)와 py(상하)로 편리하게 지정합니다.
클래스 목록
접두사 뒤에 단위 포함 값을 붙여 사용합니다. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">접두사 | 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 (% unit) | p5p | padding: 5% |
pt | padding-top (em) | pt1em | padding-top: 1em |
px / py — 수평 / 수직 축약
px와 py는 표준 CSS에는 없는 Atomic CSS 전용 축약입니다. 좌우 또는 상하 padding을 한번에 지정하여, 두 클래스를 쓸 필요 없이 하나로 처리합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 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: apply left/right simultaneously -->
<div class="px2rem">Left/right 20px padding</div>
<!-- Same as above: -->
<div class="pl2rem pr2rem">Left/right 20px padding</div>
<!-- py: apply top/bottom simultaneously -->
<div class="py4rem">Top/bottom 40px padding</div>
<!-- Same as above: -->
<div class="pt4rem pb4rem">Top/bottom 40px padding</div>
<!-- px + py Combination (Button) -->
<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 }
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">간격 | 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 조합입니다.
<!-- Buttons by size -->
<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>
<!-- Card component -->
<div class="p2rem bg18181B br8px">
<h3 class="mb8px">Card Title</h3>
<p>Card content. Equal 20px gap in all directions</p>
</div>
<!-- Section (wide top/bottom, default left/right) -->
<section class="py4rem px2rem">
<h2 class="mb16px">Section Title</h2>
<p>Top/bottom 40px, left/right 20px</p>
</section>
<!-- Used with bxzbb -->
<div class="w100p p2rem bxzbb">
Padding is included within the width (maintains 100%)
</div>패턴별 실제 모습
버튼 — py8px px16px
카드 — p2rem
카드 제목
p2rem으로 동일한 내부 간격
카드 제목
py2rem px2-4rem으로 좌우를 더 넓게
섹션 — py4rem px2rem
섹션 콘텐츠
상하 40px, 좌우 20px
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴 | 클래스 | 용도 |
|---|---|---|
| Small button | py4px px8px | 뱃지, 태그, 작은 버튼 |
| Default button | py8px px16px | 일반적인 버튼, 링크 버튼 |
| Large button | py12px px2-4rem | CTA, 주요 액션 버튼 |
| Card | p2rem | 카드 컴포넌트 내부 간격 |
| Section | py4rem px2rem | 페이지 섹션 상하 넓은 간격 + 좌우 기본 간격 |
| Container | px2rem | 좌우 여백만 필요한 래퍼 |
| List item | py12px px16px | 테이블 셀, 리스트 항목 |
| Input | 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)
Shorthand 분해
p(padding)는 내부적으로 4방향 longhand로 분해됩니다. 따라서 shorthand와 방향별 클래스를 함께 사용할 때 순서에 상관없이 정확히 동작합니다. multi-value도 CSS shorthand 규칙에 따라 분해됩니다: p10px-20px(2값) → top/bottom 10px, right/left 20px, p10px-20px-30px(3값) → top 10px, right/left 20px, bottom 30px, p10px-20px-30px-40px(4값) → top 10px, right 20px, bottom 30px, left 40px.
<!-- p2rem + pl10px → 전체 20px, 왼쪽만 10px -->
<div class="p2rem pl10px">...</div>
<!-- 생성되는 CSS -->
.p2rem {
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
}
.pl10px { padding-left: 10px; }
/* → padding-left만 10px로 정확히 덮어씀 */
<!-- multi-value 분해 예시 -->
.p10px-20px {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.p10px-20px-30px {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}
.p10px-20px-30px-40px {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}