AAtomic CSS

padding-bottom

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

클래스 패턴

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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 }

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기px 클래스rem 클래스
8pxpb8pxpb0-8rem
12pxpb12pxpb1-2rem
16pxpb16pxpb1-6rem
20pxpb20pxpb2rem
24pxpb24pxpb2-4rem
32pxpb32pxpb3-2rem
40pxpb40pxpb4rem

자주 쓰는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스실제 크기용도
pb4px4pxBadge/tag fine bottom margin
pb8px8pxButton inner bottom gap
pb16px16pxCard inner bottom gap
pb2rem20pxSection bottom padding
pb4rem40pxScroll area bottom margin

코드 예시

<!-- Top/bottom section padding -->
<section class="pt4rem pb4rem px2rem">
  <h2 class="mb16px">Section Title</h2>
  <p>Top 40px, bottom 40px inner gap</p>
</section>

<!-- Scroll area bottom margin -->
<div class="h40rem oya pb4rem">
  <p>Scrollable content...</p>
  <p>Apply pb4rem so the last item is not clipped</p>
</div>

<!-- Asymmetric card padding -->
<div class="pt2rem pr16px pb2-4rem pl16px bg18181B br8px">
  Slightly wider gap at the bottom (visual balance)
</div>

<!-- Apply top/bottom simultaneously with py -->
<section class="py4rem px2rem">
  py4rem = pt4rem + pb4rem
</section>

팁 & 주의사항

py로 상하 동시 적용

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

스크롤 영역 하단 여백

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

paddingpadding-topmargin-bottom