填充内联启动 | padding-inline-start ,Logical Properties – CSS 中文开发手册
- CSS 中文开发手册
填充内联启动 | padding-inline-start (Logical Properties) - CSS 中文开发手册
这是一种实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。还要注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
padding-inline-start 映射到依赖于要素的写作模式,方向性和文本方向的物理填充的逻辑直列开始填充。它对应于padding-top,padding-right,padding-bottom,或padding-left属性根据为定义的值writing-mode,direction和text-orientation。
它与padding-block-start,padding-block-end,和padding-inline-end定义元素的其他填充。
/* <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;
初始值
0
应用于
all elements
是否继承
no
百分比
logical-width of containing block
媒体
visual
计算值
as <length>
Animation type
discrete
规范顺序
the unique non-ambiguous order defined by the formal grammar
句法
价值
该padding-inline-start属性采用与该padding-left属性相同的值。
形式语法
<'padding-left'>
例
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; }
规格
Specification
Status
Comment
CSS Logical Properties Level 1The definition of 'padding-inline-start' in that specification.
Editor's Draft
Initial definition
浏览器兼容性
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
No support2
41.0 (41.0)1
No support
No support
No support2
Feature
Android
Firefox Mobile (Gecko)
IE Phone
Opera Mobile
Safari Mobile
Basic support
No support
41.0 (41.0)1
No support
No support
No support
- CSS 中文开发手册