padding-inline-start

Definition

The padding-inline-start property is a CSS logical property that sets the padding space on the inline-start side of an element, depending on the directionality of the text. In left-to-right writing modes, this property sets the padding space on the left side of the element, while in right-to-left writing modes, it sets the padding space on the right side of the element.

Examples

Setting padding on the left side of an element in left-to-right writing mode:

<div class="example-1">This is an example</div>
.example-1 {
  padding-inline-start: 20px;
}

Setting padding on the right side of an element in right-to-left writing mode:

<div class="example-2" dir="rtl">This is an example</div>
.example-2 {
  padding-inline-start: 20px;
}

Setting padding on both sides of an element:

<div class="example-3">This is an example</div>
.example-3 {
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

Values

Best Practices

• Use logical properties like padding-inline-start and padding-inline-end instead of physical properties like padding-left and padding-right to ensure consistent layout across left-to-right and right-to-left writing modes.
• When using percentage values for padding-inline-start, keep in mind that the padding will be relative to the width of the containing block, not the width of the element itself.
• Avoid using fixed padding values for padding-inline-start that are larger than the width of the containing block, as this can cause overflow issues.
• Consider using CSS variables to define padding values for padding-inline-start, especially if you want to reuse the same padding value across multiple elements or components.
• When using padding-inline-start and padding-inline-end together to define padding on both sides of an element, make sure that the total padding value does not exceed the available width of the containing block.

Browser Compatibility