CSS padding 属性

CSS padding 属性用于设置元素的内边距，将内容与边框之间的距离进行调整。padding 属性同时也可以用于添加背景颜色或背景图片到元素内部的空间。

语法

padding 属性的语法如下：

padding: top right bottom left;

或者

padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

以上两种写法都可以，其中：

• top：元素顶部内边距的值。
• right：元素右侧内边距的值。
• bottom：元素底部内边距的值。
• left：元素左侧内边距的值。
• value：内边距的数值，可以是百分比、像素或其他支持的 CSS 单位。

值

padding 属性可以使用的值包括：

• inherit：继承父元素的内边距值。
• <number>：在元素上使用固定的数字值展示内边距。例如，padding: 10px。
• <length>：使用特定的 CSS 长度单位来表示内边距值。例如，padding: 2em。
• <percentage>：使用一个百分比值来表示元素的宽度。例如，padding: 5%。

属性值的顺序

在 padding 值中，我们可以按照顺序指定 1 至 4 个数字，每个数字后面紧跟一个单位，通常为 px，其它单位也可以。其数值分别对应于上、右、下、左的内边距的值，如：

padding: 10px 20px 30px 40px;

这个声明把顶部内边距设置为 10px，右侧内边距设置为 20px，底部内边距设置为 30px，左侧内边距设置为 40px。

如果没有指定左右内边距值，则第二个值为右边距与左边距合并的值，如：

padding: 10px 20px;

这个声明把顶部内边距设置为 10px，底部内边距设置为 10px，左右内边距合并设置为 20px。

如果只有一个值，表示所有方向的内边距都相等，如：

padding: 10px;

实例

以下是 padding 属性的一些实例：

实例 1：

在样式中添加 padding 模板：

div{
  padding: 25px;
}

这个样式声明将会在内部四周添加一个 25 像素的内边距。

实例 2：

在样式中添加不同方向的内边距：

div {
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

这个样式声明将会在上部添加 5 像素，右边添加 15 像素，底部添加 10 像素，左边添加 20 像素内边距。

结论

padding 属性用于控制元素内部内容与边框之间的距离。你可以设置任何数量的内边距值，但是通常我们只设置 1 - 4 个来保持代码的简洁性。