blob: 2578e45113de754b1f3b1d3a12c555b8505c5718 (
plain)
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: padding
slug: Web/CSS/padding
translation_of: Web/CSS/padding
---
<div>{{CSSRef}}</div>
<p><strong><code>padding</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a>控制元素所有四条边的<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">内边距区域</a>。</p>
<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
<p class="hidden">这个可交互示例的源码保存在一个 GitHub 仓库中。如果你有兴趣为这个交互示例项目做作出贡献，请 clone 下 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提一个 pull request.</p>
<p>一个元素的内边距区域指的是其内容与其边框之间的空间。</p>
<div class="note">
<p><strong>注意：</strong>内边距控制的是元素内部空出的空间。相反，{{cssxref("margin")}} 操作元素 <em>外部</em>空出的空间。</p>
</div>
<h2 id="属性构成">属性构成</h2>
<p>该属性是以下属性的简写：</p>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li>
<li><a href="/zh-CN/docs/Web/CSS/padding-left"><code>padding-left</code></a></li>
<li><a href="/zh-CN/docs/Web/CSS/padding-right"><code>padding-right</code></a></li>
<li><a href="/zh-CN/docs/Web/CSS/padding-top"><code>padding-top</code></a></li>
</ul>
<h2 id="语法">语法</h2>
<pre class="brush:css no-line-numbers notranslate">/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;
/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;
</pre>
<p><code>padding</code> 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。取值不能为负。</p>
<ul>
<li>当只指定<strong>一个</strong>值时，该值会统一应用到<strong>全部四个边</strong>的内边距上。</li>
<li>指定<strong>两个</strong>值时，第一个值会应用于<strong>上边和下边</strong>的内边距，第二个值应用于<strong>左边和右边</strong>。</li>
<li>指定<strong>三个</strong>值时，第一个值应用于<strong>上边</strong>，第二个值应用于<strong>右边和左边</strong>，第三个则应用于<strong>下边</strong>的内边距。</li>
<li>指定<strong>四个</strong>值时，依次（顺时针方向）作为<strong>上边</strong>，<strong>右边</strong>，<strong>下边</strong>，和<strong>左边</strong>的内边距。</li>
</ul>
<h3 id="取值">取值</h3>
<dl>
<dt><strong>{{cssxref("length")}}</strong></dt>
<dd>以固定值为内边距。</dd>
<dt>{{cssxref("percentage")}}</dt>
<dd>相对于<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block">包含块</a>的<em>宽度</em>，以百分比值为内边距。</dd>
</dl>
<h2 id="标准定义">标准定义</h2>
<p>{{cssinfo}}</p>
<h2 id="语法格式">语法格式</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="示例">示例</h2>
<h3 id="以像素为单位设置内边距">以像素为单位设置内边距</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很 大！</h3>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</pre>
<h4 id="结果">结果</h4>
<p><span>{{EmbedLiveSample('以像素为单位设置内边距', '100%', 300)}}</span></p>
<h3 id="以像素和百分数为单位设置内边距">以像素和百分数为单位设置内边距</h3>
<pre class="brush: css notranslate">padding: 5%; /* 所有边：5% 的内边距 */
padding: 10px; /* 所有边：10px 的内边距 */
padding: 10px 20px; /* 上边和下边：10px 的内边距 */
/* 左边和右边：20px 的内边距 */
padding: 10px 3% 20px; /* 上边： 10px 的内边距 */
/* 左边和右边：3% 的内边距 */
/* 下边： 20px 的内边距 */
padding: 1em 3px 30px 5px; /* 上边：1em 的内边距*/
/* 右边：3px 的内边距*/
/* 下边：30px 的内边距*/
/* 左边：5px 的内边距*/
</pre>
<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('CSS3 Box', '#padding-shorthand', 'padding') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>没有变化。</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>没有变化。</td>
</tr>
<tr>
<td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">此网页上的兼容性表格由结构化数据生成。如果你有兴趣为这些数据作出贡献，请点击 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 在上面提交一个 pull request.</div>
<p>{{Compat("css.properties.padding")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li><a class="internal" href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基础框盒模型介绍</a></li>
<li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}，和 {{cssxref("padding-left")}}。</li>
<li>逻辑相关的属性：{{cssxref("padding-block-start")}}，{{cssxref("padding-block-end")}}，{{cssxref("padding-inline-start")}}，和 {{cssxref("padding-inline-end")}} 与其简称 {{cssxref("padding-block")}} 和 {{cssxref("padding-inline")}}</li>
</ul>
|
