这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概要
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 |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 适用媒体 | visual |
| 计算值 | as length |
| Animation type | discrete |
| 正规顺序 | 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;
Values
The padding-inline-start property takes the same values as the padding-left property.
Formal syntax
<'padding-left'>
范例
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 |
浏览器兼容性
| 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.
也可以看看
- The mapped physical properties:
padding-top,padding-right,padding-bottom, andpadding-left writing-mode,direction,text-orientation