padding CSS 简写属性一次性设置元素所有四条边的内边距区域。

{{InteractiveExample("CSS Demo: padding")}}

```css interactive-example-choice padding: 1em;


```css interactive-example-choice
padding: 10% 0;

```css interactive-example-choice padding: 10px 50px 20px;


```css interactive-example-choice
padding: 10px 50px 30px 0;

```css interactive-example-choice padding: 0;


```html interactive-example
<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

```css interactive-example

example-element {

border: 10px solid #ffc129; overflow: hidden; text-align: left; }

.box { border: dashed 1px; }


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

> [!NOTE]
> 内边距创建元素内部的额外空间。相反，{{cssxref("margin")}} 创建元素*外部*的额外空间。

## 属性构成

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

- {{cssxref("padding-top")}}
- {{cssxref("padding-right")}}
- {{cssxref("padding-bottom")}}
- {{cssxref("padding-left")}}

## 语法

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

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

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

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

/* 全局值 */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

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

  • 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
  • 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
  • 指定四个值时，这些值依次作为上边、右边、下边和左边的内边距（顺时针方向）。

取值

  • {{cssxref("<length>")}}
    • : 作为定值的内边距尺寸。必须是非负值。
  • {{cssxref("<percentage>")}}
    • : 相对于包含块的行内尺寸（水平语言中的宽度，由 {{cssxref("writing-mode")}} 定义）的百分比。必须是非负值。

形式定义

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