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