CSS padding-inline-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The padding-inline-start CSS property defines the spacing or padding applied to the start inline axis of an element's content box. The "start" inline axis is determined by the text direction, so in left-to-right languages like English, it would represent the left side of the element, while in right-to-left languages like Arabic, it would represent the right side. This property allows developers to control the space between the content and the edge of the element along this specific axis, helping to create consistent and visually appealing layouts, especially in multilingual or bi-directional web designs.

Initial value
0
Applies to
all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited
no
Computed value
as <length>
Animatable
a length
JavaScript syntax
object.style.paddingInlineStart

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-inline-start: <padding-top> 

Values

  • <padding-top> Specifies distance in px, pt, cm, etc. Negative values are not allowed.

Example

<div>
<p class="exampleText">Example text</p>
</div>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}

Browser Support

The following table will show you the current browser support for the CSS padding-inline-start property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 2nd January 2024