The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the padding-toppadding-rightpadding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation.

It relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element.

适用元素all elements
Percentageslogical-width of containing block
计算值as length
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar


/* <length> values */
padding-inline-start: 10px;   /* An absolute length */
padding-inline-start: 1em;    /* A length relative to the text size */

/* <percentage> value */
padding-inline-start: 5%;     /* A padding relative to the block container's width */

/* Global values */
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: unset;


The padding-inline-start property takes the same values as the padding-left property.

Formal syntax


HTML Content

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

CSS Content

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

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


规范 状态 注释
CSS Logical Properties and Values Level 1
Editor's Draft Initial definition


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 未实现[2] 41.0 (41.0)[1] 未实现 未实现 未实现[2]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 未实现 41.0 (41.0)[1] 未实现 未实现 未实现

[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version. From Firefox 3, Gecko supports the prefixed -moz-padding-start.

[2] From Chrome 2 and Safari 3, the similar prefixed -webkit-padding-start are supported.