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!

☕ Buy a Coffee

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

padding-inline-start: 15%;
writing-mode: horizontal-tb;

padding-inline-start: 15px;
writing-mode: vertical-rl;
height: 250px;

padding-inline-start: 15%;
writing-mode: horizontal-tb;
direction: rtl;
unicode-bidi:bidi-override;

padding-inline-start: 2em;
writing-mode: vertical-lr;
height: 250px;

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

HTML

<div>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Result

Editor