AAtomic CSS

padding-top

요소 위쪽의 내부 간격을 설정합니다. 접두사 pt 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 상단 여백, 카드 내부 간격, 헤더 높이 조절 등에 활용됩니다.

클래스 패턴

접두사 pt + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.

클래스CSS 출력설명
pt4pxpadding-top: 4px최소 간격
pt8pxpadding-top: 8px좁은 간격
pt12pxpadding-top: 12px기본 간격
pt16pxpadding-top: 16px넉넉한 간격
pt2rempadding-top: 2rem (20px)rem 단위 시작점
pt2-4rempadding-top: 2.4rem (24px)소수점은 하이픈으로 표기
pt3-2rempadding-top: 3.2rem (32px)넓은 간격
pt4rempadding-top: 4rem (40px)섹션 상단 간격
ptapadding-top: auto자동 패딩 (일부 레이아웃 컨텍스트)

단위 비교

동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }

크기px 클래스rem 클래스
8pxpt8pxpt0-8rem
12pxpt12pxpt1-2rem
16pxpt16pxpt1-6rem
20pxpt20pxpt2rem
24pxpt24pxpt2-4rem
32pxpt32pxpt3-2rem
40pxpt40pxpt4rem

자주 쓰는 값

클래스실제 크기용도
pt4px4px뱃지, 태그 내부 미세 여백
pt8px8px버튼, 입력 필드 상단 여백
pt16px16px카드 상단 내부 간격
pt2rem20px섹션 상단 패딩
pt4rem40px히어로 섹션 상단 여백

코드 예시

<!-- 카드 상단 간격만 다르게 -->
<div class="pt2rem pr16px pb16px pl16px bg18181B br8px">
  상단만 20px, 나머지 16px
</div>

<!-- 고정 헤더 아래 콘텐츠 밀기 -->
<header class="pf t0 l0 w100p h6rem bg18181B zi100">헤더</header>
<main class="pt6rem px2rem">
  헤더 높이만큼 padding-top으로 보상
</main>

<!-- 섹션 상단 여백 -->
<section class="pt4rem pb4rem px2rem">
  <h2 class="mb16px">섹션 제목</h2>
  <p>섹션 내용</p>
</section>

<!-- 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 안에 포함됩니다.

paddingpadding-bottommargin-top