填充內聯啟動 | 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 |