files/zh-cn/web/css/padding-right/index.html


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
143
144

---
title: padding-right
slug: Web/CSS/padding-right
tags:
  - CSS
  - CSS 内边距
  - CSS 属性
translation_of: Web/CSS/padding-right
---
<div>{{CSSRef}}</div>

<p>CSS属性 <strong>padding-right</strong> 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。</p>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/* &lt;percentage&gt; value */
padding-right: 10%;

/* Global values */
padding-right: inherit;
padding-right: initial;
padding-right: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt>{{cssxref("length")}}</dt>
 <dd>当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。</dd>
 <dt>{{cssxref("percentage")}}</dt>
 <dd>当内边距（padding）是一个百分比的时候， 百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">Examples</h2>

<pre class="brush: css">.content { padding-right: 5%; }
.sidebox { padding-right: 10px; }
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defines <code>padding-right</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>1.0 (1.0)</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</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>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
 <li>The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: {{cssxref("padding-top")}}, <code>padding-right</code>, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.</li>
</ul>