---
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("&lt;length&gt;")}} 或 {{cssxref("&lt;percentage&gt;")}}。取值不能为负。</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">&lt;h4&gt;此元素有合适的内边距。&lt;/h4&gt;
&lt;h3&gt;此元素的内边距很  大！&lt;/h3&gt;
</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>