CSS padding-inline Property

Definition and Usage

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

In a horizontal left-to-right writing mode, that maps to left and right — like padding-left / padding-right. With direction: rtl, start and end swap sides. With a vertical writing-mode, it can map to top/bottom instead. It is not inherited. Each side starts at 0. Negative values are invalid.

CSS Syntax

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

Property Values

How to Use padding-inline

Think in inline-start / inline-end instead of left / right.

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

Live Preview

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

CSS Examples

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

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

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

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

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

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

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

Key Takeaways