padding-bottom
요소 아래쪽의 내부 간격을 설정합니다. 접두사 pb 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 하단 여백, 카드 내부 간격, 컨테이너 마무리 공간 등에 활용됩니다.
클래스 패턴
접두사 pb + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| 클래스 | CSS 출력 | 설명 |
|---|---|---|
pb4px | padding-bottom: 4px | 최소 간격 |
pb8px | padding-bottom: 8px | 좁은 간격 |
pb12px | padding-bottom: 12px | 기본 간격 |
pb16px | padding-bottom: 16px | 넉넉한 간격 |
pb2rem | padding-bottom: 2rem (20px) | rem 단위 시작점 |
pb2-4rem | padding-bottom: 2.4rem (24px) | 소수점은 하이픈으로 표기 |
pb3-2rem | padding-bottom: 3.2rem (32px) | 넓은 간격 |
pb4rem | padding-bottom: 4rem (40px) | 섹션 하단 간격 |
단위 비교
동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }
| 크기 | px 클래스 | rem 클래스 |
|---|---|---|
| 8px | pb8px | pb0-8rem |
| 12px | pb12px | pb1-2rem |
| 16px | pb16px | pb1-6rem |
| 20px | pb20px | pb2rem |
| 24px | pb24px | pb2-4rem |
| 32px | pb32px | pb3-2rem |
| 40px | pb40px | pb4rem |
자주 쓰는 값
| 클래스 | 실제 크기 | 용도 |
|---|---|---|
pb4px | 4px | 배지·태그의 미세한 하단 여백 |
pb8px | 8px | 버튼 내부 하단 간격 |
pb16px | 16px | 카드 내부 하단 간격 |
pb2rem | 20px | 섹션 하단 패딩 |
pb4rem | 40px | 스크롤 영역 하단 여백 |
패딩이 보이는 상자
바깥 상자에 padding-bottom만 주고, 안쪽 파란 상자는 그대로 뒀습니다. 아래쪽에만 생기는 옅은 띠가 바로 padding-bottom입니다.
pb16px
16px. 본문 마지막 줄과 구분선 사이 간격에 적당합니다.
pb2rem
20px. 섹션과 카드의 기본 간격입니다.
pb4rem
40px. 페이지 끝이나 푸터 앞의 여백입니다.
패딩은 테두리 안쪽 공간입니다
패딩은 배경색이 칠해지는 영역 안쪽에 생깁니다. 그래서 상자 배경이 패딩까지 함께 칠해지고, 마진과 달리 바깥 요소를 밀어내지 않습니다.
클래스별 상세
pb16pxpadding-bottom: 16px
카드 본문의 마지막 줄이 구분선이나 푸터에 붙지 않게 하는 기본 간격입니다.
언제 쓰나
조밀한 표, 목록 행, 카드 본문처럼 정보 밀도가 중요한 곳에 씁니다.
<!-- Card body: keep the last line off the footer rule -->
<article class="bg18181B b1pxsolid27272A br8px">
<div class="pt16px px16px pb16px fs14px cA1A1AA lh1-7">
The last line stops 16px above the divider.
</div>
<footer class="p16px bt1pxsolid27272A fs12px c71717A">Updated today</footer>
</article>pb2rempadding-bottom: 2rem
20px. 섹션과 카드의 기본 하단 간격입니다. 상단과 같은 값을 쓰면 리듬이 맞습니다.
언제 쓰나
일반적인 카드와 패널의 기본값으로 쓰기 좋습니다. 상단 값과 짝을 맞춰 쓰면 <code class="fs13px cC4B5FD bg1E1E2E py2px px4px br4px">py</code>로 줄일 수 있습니다.
<!-- Section rhythm: equal breathing room top and bottom -->
<section class="pt2rem pb2rem px2rem bb1pxsolid27272A">
<h2 class="fs2-4rem fw700 cFAFAFA mb16px">Members</h2>
<p class="fs14px cA1A1AA lh1-7">Section content</p>
</section>pb4rempadding-bottom: 4rem
40px. 페이지가 끝났음을 시각적으로 알리는 넉넉한 여백입니다.
언제 쓰나
본문 끝과 푸터 사이, 긴 글의 마지막 블록처럼 끝맺음이 필요한 곳에 씁니다.
<!-- Page tail: space before the footer -->
<main class="pb4rem px2rem">
<p class="fs14px cA1A1AA lh1-7">Last paragraph of the article</p>
</main>
<footer class="p2rem bt1pxsolid27272A fs12px c71717A">Footer</footer>코드 예시
<!-- 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>하단에 고정된 액션 바가 있는 스크롤 목록입니다. 마지막 행이 버튼에 가리지 않도록 목록 아래쪽에 바 높이만큼 패딩을 줬습니다.
<!-- Scroll list that clears a sticky action bar -->
<div class="pr h60rem df fdc bg0F0F17 b1pxsolid27272A br12px oh">
<!-- 8rem of bottom padding so the final row is never hidden -->
<div class="oya obyc fg1 minh0 pb8rem px2rem pt2rem">
<div class="py16px bb1pxsolid27272A fs14px cFAFAFA">Row 1</div>
<div class="py16px bb1pxsolid27272A fs14px cFAFAFA">Row 2</div>
<div class="py16px fs14px cFAFAFA">Last row stays visible</div>
</div>
<div class="pa b0 l0 w100p h8rem bt1pxsolid27272A bg0F0F17 df aic jcfe gap8px px2rem">
<button class="py8px px16px bg18181B cFAFAFA br8px bn cp">Cancel</button>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Apply</button>
</div>
</div>팁 & 주의사항
py로 상하 동시 적용
상하 padding이 동일하면 py2rem으로 pt2rem pb2rem을 한번에 적용할 수 있습니다.
스크롤 영역 하단 여백
스크롤 가능한 영역에서 마지막 콘텐츠가 잘리지 않도록 pb2rem이나 pb4rem을 적용하면 좋습니다.
패딩은 상쇄되지 않습니다
세로 마진은 인접한 요소끼리 겹쳐서 하나로 합쳐지지만, 패딩은 절대 상쇄되지 않습니다. 마지막 자식의 margin-bottom이 부모 밖으로 새는 문제도 부모에 padding-bottom을 주면 막을 수 있습니다.
백분율 패딩은 가로 폭 기준입니다
패딩에 백분율을 쓰면 위아래 방향이라도 부모의 가로 폭을 기준으로 계산됩니다. 세로 비율을 만들려는 의도라면 예상과 전혀 다른 값이 나오니 주의하세요.
스크롤 영역의 마지막 항목
스크롤 컨테이너 안에서는 마지막 자식의 margin-bottom이 무시되는 브라우저가 있습니다. 마지막 항목 아래 여백이 꼭 필요하다면 컨테이너에 padding-bottom을 주는 편이 확실합니다.