padding - CSS（层叠样式表）编辑

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

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

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

属性构成

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

语法

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

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

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

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

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

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

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

取值

length: 以固定值为内边距。
percentage: 相对于包含块的宽度，以百分比值为内边距。

标准定义

初始值	as each of the properties of the shorthand: `padding-bottom`: `0` `padding-left`: `0` `padding-right`: `0` `padding-top`: `0`
适用元素	all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`.
是否是继承属性	否
Percentages	refer to the width of the containing block
计算值	as each of the properties of the shorthand: `padding-bottom`: the percentage as specified or the absolute length `padding-left`: the percentage as specified or the absolute length `padding-right`: the percentage as specified or the absolute length `padding-top`: the percentage as specified or the absolute length
Animation type	a length

语法格式

[ <length> | <percentage> ]{1,4}

示例

以像素为单位设置内边距

HTML

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

CSS

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

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

结果

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

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

规范

规范	阶段	备注
CSS Basic Box Model padding	Working Draft	没有变化。
CSS Level 2 (Revision 1) padding	Recommendation	没有变化。
CSS Level 1 padding	Recommendation	初始定义。