CSS padding-inline-start Property

Definition and Usage

The padding-inline-start property sets inner spacing on the inline-start side of an element. In default horizontal left-to-right writing it behaves like padding-left.

The physical side depends on writing-mode, direction, and text orientation. Pair it with padding-inline-end, or use the padding-inline shorthand for both sides.

CSS Syntax

Values match physical padding. Lengths and percentages must be non-negative. The initial value is 0.

Property Values

How to Use padding-inline-start

Add space before the content along the inline axis, then let writing mode and direction pick the physical side.

1. Choose a non-negative length or percentage.
2. Set it on the element that needs start-side inner space.
3. In LTR horizontal text it pads the left; in RTL it pads the right.
4. Prefer this over padding-left when the layout must work in both directions.

Live Preview

Change padding-inline-start on a bordered box. In LTR, the gap appears on the left of the text.

CSS Examples

Each snippet focuses on padding-inline-start. Use Try It Yourself for a live editor.

<style>
  div {
    padding-inline-start: 2rem;
    border: 1px solid black;
  }
</style>

<div>Start padding here</div>

<style>
  div {
    direction: rtl;
    padding-inline-start: 2rem;
    border: 1px solid black;
  }
</style>

<div>Start is on the right</div>

<style>
  div {
    writing-mode: vertical-rl;
    padding-inline-start: 2rem;
    border: 1px solid black;
  }
</style>

<div>Inline axis is vertical</div>

Key Takeaways