CSS padding-bottom Property

Definition and Usage

The padding-bottom property sets the inner padding on the physical bottom edge of an element — the space between the content and the bottom border.

It is a longhand of the padding shorthand. Unlike padding-block-end, it always means bottom, even if writing-mode changes. It is not inherited. The initial value is 0. Negative values are invalid.

CSS Syntax

One non-negative length or percentage. There is no auto (unlike margin-bottom).

Property Values

How to Use padding-bottom

Add room below the content, inside the border.

1. Decide how much space you need between the content and the bottom border.
2. Set padding-bottom with a non-negative length or percentage.
3. Use padding-top or the padding shorthand if other sides need padding too.
4. Choose padding-block-end instead if the layout may switch writing mode.

Live Preview

The amber area is padding. Change padding-bottom — only the bottom edge grows.

CSS Examples

Each snippet focuses on padding-bottom. Use Try It Yourself for a live editor.

<style>
  .box {
    padding-bottom: 1.5rem;
    border: 1px solid #ccc;
  }
</style>

<div class="box">Padded content</div>

<style>
  .wrap { width: 280px; }
  .box {
    padding-bottom: 5%;
    border: 1px solid #ccc;
  }
</style>

<div class="wrap">
  <div class="box">5% bottom padding</div>
</div>

<style>
  .box {
    writing-mode: vertical-rl;
    padding-bottom: 1.5rem;
    border: 1px solid #ccc;
  }
</style>

<div class="box">Vertical text</div>

Key Takeaways