padding-top
요소 위쪽의 내부 간격을 설정합니다. 접두사 pt 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 상단 여백, 카드 내부 간격, 헤더 높이 조절 등에 활용됩니다.
클래스 패턴
접두사 pt + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS 출력 | 설명 |
|---|---|---|
pt4px | padding-top: 4px | 최소 간격 |
pt8px | padding-top: 8px | 좁은 간격 |
pt12px | padding-top: 12px | 기본 간격 |
pt16px | padding-top: 16px | 넉넉한 간격 |
pt2rem | padding-top: 2rem (20px) | rem 단위 시작점 |
pt2-4rem | padding-top: 2.4rem (24px) | 소수점은 하이픈으로 표기 |
pt3-2rem | padding-top: 3.2rem (32px) | 넓은 간격 |
pt4rem | padding-top: 4rem (40px) | 섹션 상단 간격 |
pta | padding-top: auto | 자동 패딩 (일부 레이아웃 컨텍스트) |
단위 비교
동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기 | px 클래스 | rem 클래스 |
|---|---|---|
| 8px | pt8px | pt0-8rem |
| 12px | pt12px | pt1-2rem |
| 16px | pt16px | pt1-6rem |
| 20px | pt20px | pt2rem |
| 24px | pt24px | pt2-4rem |
| 32px | pt32px | pt3-2rem |
| 40px | pt40px | pt4rem |
자주 쓰는 값
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 실제 크기 | 용도 |
|---|---|---|
pt4px | 4px | Badge/tag fine inner margin |
pt8px | 8px | Button/input field top margin |
pt16px | 16px | Card inner top gap |
pt2rem | 20px | Section top padding |
pt4rem | 40px | Hero section top margin |
코드 예시
<!-- Different gap only at the top of card -->
<div class="pt2rem pr16px pb16px pl16px bg18181B br8px">
Top only 20px, rest 16px
</div>
<!-- Push content below fixed header -->
<header class="pf t0 l0 w100p h6rem bg18181B zi100">Header</header>
<main class="pt6rem px2rem">
Compensate with padding-top equal to header height
</main>
<!-- Section top margin -->
<section class="pt4rem pb4rem px2rem">
<h2 class="mb16px">Section Title</h2>
<p>Section content</p>
</section>
<!-- Apply top/bottom simultaneously with py (pt + pb) -->
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Button
</button>팁 & 주의사항
py로 상하 동시 적용
상하 padding이 동일하면 py16px로 pt16px pb16px을 한번에 적용할 수 있습니다. Atomic CSS 전용 축약입니다.
box-sizing 주의
기본적으로 pt는 요소의 전체 높이를 늘립니다. bxzbb(box-sizing: border-box)를 사용하면 padding이 height 안에 포함됩니다.