CSS padding-block-start Property

Definition and Usage

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

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-end). 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-start

Think “inner space before the content in the writing flow,” not always “top.”

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

Live Preview

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

CSS Examples

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

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

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

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

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

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

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

Key Takeaways