1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: padding-inline-start
slug: Web/CSS/padding-inline-start
translation_of: Web/CSS/padding-inline-start
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="概要">概要</h2>
<p>The<strong> <code>padding-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> 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 {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p>
<p>It relates to {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-end")}}, which define the other paddings of the element.</p>
<p>{{cssinfo}}</p>
<h2 id="句法">句法</h2>
<pre class="brush:css">/* <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;
</pre>
<h3 id="Values">Values</h3>
<p>The <code>padding-inline-start</code> property takes the same values as the {{cssxref("padding-left")}} property.</p>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="范例">范例</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html"><div>
<p class="exampleText">Example text</p>
</div>
</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
padding-inline-start: 20px;
background-color: #C8C800;
}</pre>
<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
<td>{{Spec2("CSS Logical Properties")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Available since Gecko 38, but behind the preference <code>layout.css.vertical-text.enabled</code>, 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 <code>-moz-padding-start</code>.</p>
<p>[2] From Chrome 2 and Safari 3, the similar prefixed <code>-webkit-padding-start</code> are supported.</p>
<h2 id="也可以看看">也可以看看</h2>
<ul>
<li>The mapped physical properties: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}</li>
<li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
</ul>
|
