CSS padding-block-end Property

Definition and Usage

The padding-block-end property sets the inner padding on the block-end edge of an element. In a horizontal writing mode (the usual default), that maps to the physical bottom — like padding-bottom.

With a vertical writing-mode, it can map to left or right instead. It is one half of the padding-block shorthand (with padding-block-start). It is not inherited. The initial value is 0. Negative values are invalid.

CSS Syntax

Same value types as padding-top / padding-bottom, but the side is logical. There is no auto.

Property Values

How to Use padding-block-end

Think “inner space after the content in the writing flow,” not always “bottom.”

1. Decide how much padding you want after the content on the block axis.
2. Set padding-block-end with a non-negative length or percentage.
3. Use padding-block-start if you also need space before the content.
4. Test with writing-mode if orientation may change.

Live Preview

The amber area is padding. Change padding-block-end in a horizontal writing mode (block-end = bottom).

CSS Examples

Each snippet focuses on padding-block-end (plus writing-mode when needed). Use Try It Yourself for a live editor.

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

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

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

<div class="wrap">
  <div class="box">5% block-end padding</div>
</div>

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

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

Key Takeaways