CSS padding-inline-end Property

Definition and Usage

The padding-inline-end property sets the inner padding on the inline-end edge of an element. In a horizontal left-to-right writing mode, that maps to the physical right — like padding-right.

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

CSS Syntax

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

Property Values

How to Use padding-inline-end

Think “inner space after the content along the line,” not always “right.”

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

Live Preview

The amber area is padding. Change padding-inline-end in a horizontal LTR writing mode (inline-end = right).

CSS Examples

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

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

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

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

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

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

<div class="box">نص عربي</div>

Key Takeaways