--- title: padding slug: Web/CSS/padding translation_of: Web/CSS/padding ---
{{CSSRef}}

padding CSS 简写属性控制元素所有四条边的内边距区域。

{{EmbedInteractiveExample("pages/css/padding.html")}}

一个元素的内边距区域指的是其内容与其边框之间的空间。

注意：内边距控制的是元素内部空出的空间。相反，{{cssxref("margin")}} 操作元素 外部空出的空间。

属性构成

该属性是以下属性的简写：

语法

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;

padding 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。取值不能为负。

取值

{{cssxref("length")}}
以固定值为内边距。
{{cssxref("percentage")}}
相对于包含块的宽度，以百分比值为内边距。

标准定义

{{cssinfo}}

语法格式

{{csssyntax}}

示例

以像素为单位设置内边距

HTML

<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很  大！</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

结果

{{EmbedLiveSample('以像素为单位设置内边距', '100%', 300)}}

以像素和百分数为单位设置内边距

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  的内边距*/

规范

规范 阶段 备注
{{ SpecName('CSS3 Box', '#padding-shorthand', 'padding') }} {{ Spec2('CSS3 Box') }} 没有变化。
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }} {{ Spec2('CSS2.1') }} 没有变化。
{{ Specname('CSS1', '#padding', 'padding') }} {{ Spec2('CSS1') }} 初始定义。

浏览器兼容性

{{Compat("css.properties.padding")}}

参阅