AAtomic CSS

padding-bottom

요소 아래쪽의 내부 간격을 설정합니다. 접두사 pb 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 하단 여백, 카드 내부 간격, 컨테이너 마무리 공간 등에 활용됩니다.

클래스 패턴

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

클래스CSS 출력설명
pb4pxpadding-bottom: 4px최소 간격
pb8pxpadding-bottom: 8px좁은 간격
pb12pxpadding-bottom: 12px기본 간격
pb16pxpadding-bottom: 16px넉넉한 간격
pb2rempadding-bottom: 2rem (20px)rem 단위 시작점
pb2-4rempadding-bottom: 2.4rem (24px)소수점은 하이픈으로 표기
pb3-2rempadding-bottom: 3.2rem (32px)넓은 간격
pb4rempadding-bottom: 4rem (40px)섹션 하단 간격
pbapadding-bottom: auto자동 패딩 (일부 레이아웃 컨텍스트)

단위 비교

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

크기px 클래스rem 클래스
8pxpb8pxpb0-8rem
12pxpb12pxpb1-2rem
16pxpb16pxpb1-6rem
20pxpb20pxpb2rem
24pxpb24pxpb2-4rem
32pxpb32pxpb3-2rem
40pxpb40pxpb4rem

자주 쓰는 값

클래스실제 크기용도
pb4px4px뱃지, 태그 하단 미세 여백
pb8px8px버튼 하단 내부 간격
pb16px16px카드 하단 내부 간격
pb2rem20px섹션 하단 패딩
pb4rem40px스크롤 영역 하단 여유 공간

코드 예시

<!-- 섹션 상하 패딩 -->
<section class="pt4rem pb4rem px2rem">
  <h2 class="mb16px">섹션 제목</h2>
  <p>상단 40px, 하단 40px 내부 간격</p>
</section>

<!-- 스크롤 영역 하단 여백 -->
<div class="h40rem oya pb4rem">
  <p>스크롤 가능한 콘텐츠...</p>
  <p>마지막 항목이 잘리지 않도록 pb4rem 적용</p>
</div>

<!-- 카드 비대칭 패딩 -->
<div class="pt2rem pr16px pb2-4rem pl16px bg18181B br8px">
  하단에 약간 더 넓은 간격 (시각적 균형)
</div>

<!-- py로 상하 동시 적용 -->
<section class="py4rem px2rem">
  py4rem = pt4rem + pb4rem
</section>

팁 & 주의사항

py로 상하 동시 적용

상하 padding이 동일하면 py2rem으로 pt2rem pb2rem을 한번에 적용할 수 있습니다.

스크롤 영역 하단 여백

스크롤 가능한 영역에서 마지막 콘텐츠가 잘리지 않도록 pb2rem이나 pb4rem을 적용하면 좋습니다.

paddingpadding-topmargin-bottom