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
145
146
147
148
149
150
|
---
title: padding-top
slug: Web/CSS/padding-top
tags:
- CSS
- CSS 内边距
- CSS 属性
translation_of: Web/CSS/padding-top
---
<div>{{CSSRef}}</div>
<p>CSS属性 <strong>padding-top </strong>是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。</p>
<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<pre class="brush:css no-line-numbers">/* <length> values */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* <percentage> value */
padding-top: 10%;
/* Global values */
padding-top: inherit;
padding-top: initial;
padding-top: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">语法规则</h2>
<h3 id="Values" name="Values">取值</h3>
<dl>
<dt>{{cssxref("length")}}</dt>
<dd>当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。</dd>
<dt>{{cssxref("percentage")}}</dt>
<dd>当内边距（padding）是一个百分比的时候， 百分比是和<strong>包含块（containing block）的宽度</strong>有关的，同样一定不能为负数。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">实例</h2>
<pre class="brush: css">.content { padding-top: 5%; }
.sidebox { padding-top: 10px; }
</pre>
<h2 id="详细说明">详细说明</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-top') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>padding-top</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.</td>
</tr>
<tr>
<td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="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="更多浏览"> 更多浏览</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: <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.</li>
</ul>
<p>
<audio class="hidden"> </audio>
</p>
|
