padding-inline-start

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概要

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-top, padding-right, padding-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.

初始值0
适用元素all elements
是否是继承属性否
Percentageslogical-width of containing block
计算值as length
Animation typea length

句法

/* <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;

Values

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

Formal syntax

范例

HTML Content

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

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
padding-inline-start		 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.

也可以看看