padding-top
요소 위쪽의 내부 간격을 설정합니다. 접두사 pt 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 상단 여백, 카드 내부 간격, 헤더 높이 조절 등에 활용됩니다.
클래스 패턴
접두사 pt + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| 클래스 | 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) | 섹션 상단 간격 |
단위 비교
동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }
| 크기 | 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 |
자주 쓰는 값
| 클래스 | 실제 크기 | 용도 |
|---|---|---|
pt4px | 4px | 배지·태그의 미세한 내부 여백 |
pt8px | 8px | 버튼·입력 필드 상단 여백 |
pt16px | 16px | 카드 내부 상단 간격 |
pt2rem | 20px | 섹션 상단 패딩 |
pt4rem | 40px | 히어로 섹션 상단 여백 |
패딩이 보이는 상자
바깥 상자에 padding-top만 주고, 안쪽 파란 상자는 그대로 뒀습니다. 위쪽에만 생기는 옅은 띠가 바로 padding-top입니다.
pt16px
16px. 카드 본문과 구분선 사이 간격에 적당합니다.
pt2rem
20px. 섹션과 카드의 기본 간격입니다.
pt4rem
40px. 히어로나 큰 섹션의 상단 여백입니다.
패딩은 테두리 안쪽 공간입니다
패딩은 배경색이 칠해지는 영역 안쪽에 생깁니다. 그래서 상자 배경이 패딩까지 함께 칠해지고, 마진과 달리 바깥 요소를 밀어내지 않습니다.
클래스별 상세
pt16pxpadding-top: 16px
카드 본문이나 목록 항목의 기본 상단 간격입니다. 글자가 구분선이나 헤더에 붙지 않게 최소한의 숨통을 틔웁니다.
언제 쓰나
조밀한 표, 목록 행, 카드 본문처럼 정보 밀도가 중요한 곳에 씁니다.
<!-- Card body: keep the text off the header rule -->
<article class="bg18181B b1pxsolid27272A br8px">
<h3 class="p16px bb1pxsolid27272A fs14px fw700 cFAFAFA">Weekly report</h3>
<div class="pt16px px16px pb16px fs14px cA1A1AA lh1-7">
Body copy starts 16px below the divider.
</div>
</article>pt2rempadding-top: 2rem
20px. 섹션과 카드의 기본 상단 간격입니다. 4의 배수 규칙을 지키면서 rem 단위가 시작되는 지점이기도 합니다.
언제 쓰나
일반적인 카드와 패널의 기본값으로 쓰기 좋습니다. 화면 전체에서 이 값을 기준으로 삼고 필요할 때만 위아래로 조정하세요.
<!-- Section rhythm inside a page -->
<section class="pt2rem pb2rem px2rem bt1pxsolid27272A">
<h2 class="fs2-4rem fw700 cFAFAFA mb16px">Billing</h2>
<p class="fs14px cA1A1AA lh1-7">Section content</p>
</section>pt4rempadding-top: 4rem
40px. 시선이 쉬어 갈 만큼 넉넉한 상단 여백입니다.
언제 쓰나
히어로 섹션, 페이지 첫 블록, 고정 헤더 아래 첫 콘텐츠처럼 여백 자체가 메시지가 되는 곳에 씁니다.
<!-- Hero: generous space under a fixed header -->
<header class="pf t0 l0 w100p h6rem bg18181B zi100">Header</header>
<section class="pt4rem pb4rem px2rem tac">
<h1 class="fs4rem fw800 cFAFAFA mb16px">Ship faster</h1>
<p class="fs16px c71717A">Subtitle</p>
</section>코드 예시
<!-- 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>하나의 간격 척도로 밀도가 다른 카드 세 종류를 만든 예입니다. 값을 임의로 고르지 말고 척도 안에서 고르세요.
<!-- One density scale, three card sizes -->
<div class="dg gtcr3-1fr gap2rem">
<!-- Compact: dense tables and list rows -->
<article class="pt12px pb12px px16px bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Compact</p>
<p class="fs14px cFAFAFA">12px top padding</p>
</article>
<!-- Comfortable: the default for cards -->
<article class="pt2rem pb2rem px2rem bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Comfortable</p>
<p class="fs14px cFAFAFA">20px top padding</p>
</article>
<!-- Spacious: marketing surfaces -->
<article class="pt4rem pb4rem px3-2rem bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Spacious</p>
<p class="fs14px cFAFAFA">40px top padding</p>
</article>
</div>팁 & 주의사항
py로 상하 동시 적용
상하 padding이 동일하면 py16px로 pt16px pb16px을 한번에 적용할 수 있습니다. Atomic CSS 전용 축약입니다.
box-sizing 주의
기본적으로 pt는 요소의 전체 높이를 늘립니다. bxzbb(box-sizing: border-box)를 사용하면 padding이 height 안에 포함됩니다.
패딩은 상쇄되지 않습니다
세로 마진은 인접한 요소끼리 겹쳐서 하나로 합쳐지지만, 패딩은 절대 상쇄되지 않습니다. 부모의 padding-top과 자식의 margin-top이 겹쳐 보이는 문제가 있다면 패딩 쪽이 원인이 아닙니다.
백분율 패딩은 가로 폭 기준입니다
패딩에 백분율을 쓰면 위아래 방향이라도 부모의 가로 폭을 기준으로 계산됩니다. 세로 비율을 만들려는 의도라면 예상과 전혀 다른 값이 나오니 주의하세요.
인라인 요소의 세로 패딩
인라인 요소에 padding-top을 주면 배경은 넓어지지만 줄 높이는 밀리지 않아 위아래 줄과 겹칩니다. 배지처럼 보이게 하려면 dib를 함께 주세요.