CSS Padding属性

CSS的Padding（内边距）属性用于设置元素的内边距，即元素内容与边框之间的距离。可以设置上下左右四个方向的内边距，也可以使用缩写形式进行设置。

语法

/* 设置上下左右四个方向的内边距 */
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

/* 使用缩写形式设置内边距 */
padding: top right bottom left;
padding: topRight&BottomLeft bottomRight&TopLeft;
padding: initial;
padding: inherit;

其中，value可以是长度值、百分比、calc()函数等。

• 如果只指定一个值，则上下左右四个方向的内边距都相等。
• 如果指定两个值，则上下和左右的内边距分别相等。
• 如果指定三个值，则依次表示上、左右、下方向的内边距。
• 如果指定四个值，则依次表示上、右、下、左方向的内边距。

缩写形式

使用缩写形式设置内边距时，需要按照如下方式进行：

• 如果只指定一个值，则上下左右四个方向的内边距都相等。
• 如果指定两个值，则上下和左右的内边距分别相等。
• 如果指定三个值，则依次表示上、左右、下方向的内边距。
• 如果指定四个值，则依次表示上、右、下、左方向的内边距。

其中，值之间可以用空格或者斜杠分隔，斜杠分隔表示指定左右和上下两组值。

初始值和继承值

• 初始值：0。
• 继承值：yes。

实例

使用 padding-top、padding-right、padding-bottom、padding-left

div {
  padding-top: 20px;
  padding-right: 10%;
  padding-bottom: 30px;
  padding-left: calc(20% - 10px);
}

使用 padding

div {
  padding: 20px;
}

div {
  padding: 20px 10%;
}

div {
  padding: 20px 10% 30px;
}

div {
  padding: 20px 5% 10px 15%;
}

div {
  padding: 20px 5% / 10px 15%;
}

使用初始值和继承值

div {
  padding: initial;
}

#child {
  padding: inherit;
}

以上就是CSS的Padding属性的所有内容。