CSS padding-block Property

Definition and Usage

The padding-block property is a shorthand for padding-block-start and padding-block-end. It sets inner spacing on the block axis.

In a horizontal writing mode (the usual default), that maps to top and bottom — like padding-top / padding-bottom. With a vertical writing-mode, it can map to the physical left/right sides instead. It is not inherited. Each side starts at 0. Negative values are invalid.

CSS Syntax

1 value = both block-start and block-end. 2 values = block-start, then block-end.

Property Values

How to Use padding-block

Think in block-start / block-end instead of top / bottom.

1. Decide the block-axis inner spacing (before and after the content in the writing flow).
2. Set padding-block with one value (both sides) or two (start, end).
3. Use padding-inline if you also need the inline axis.
4. Test with writing-mode if the page may switch orientation.

Live Preview

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

CSS Examples

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

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

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

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

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

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

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

Key Takeaways