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