基础篇10—CSS padding(填充内边距)解析

CSS padding属性是用来设置一个元素的内边距，即内容和边界之间的空间。

CSS padding属性可以有1到4个值。

1. 当只有一个值提供时，它将用于所有四个边。

示例代码：

.element {
  padding: 10px;
}

2. 当有两个值提供时，第一个值用于上／下，第二个值用于左／右。

示例代码：

.element {
  padding: 10px 20px;
}

3. 当有三个值提供时，第一个值用于上，第二个值用于左／右，第三个值用于下。

示例代码：

.element {
  padding: 10px 20px 30px;
}

4. 当有四个值提供时，它们分别用于上，右，下，左。

示例代码：

.element {
  padding: 10px 20px 30px 40px;
}

CSS padding属性也可以使用以下单独的属性来设置每个边界的填充：

• padding-top: 设置元素的顶部填充。
• padding-right: 设置元素的右侧填充。
• padding-bottom: 设置元素的底部填充。
• padding-left: 设置元素的左侧填充。

示例代码：

.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

CSS padding属性可以使用百分比值来设置填充，这时候百分比是相对于父元素的宽度来计算的。

示例代码：

.element {
  padding: 5%;
}

CSS padding属性也可以使用关键字"inherit"，这将从父元素继承padding。

示例代码：

.element {
  padding: inherit;
}

CSS padding属性也可以使用"auto"值，这将自动调整上下左右的填充，以保持元素的水平与垂直居中。

示例代码：

.element {
  padding: auto;
}

CSS padding属性可以使用"initial"值，这将设置为默认的padding值。

示例代码：

.element {
  padding: initial;
}

CSS padding属性可以使用"unset"值，这将从父元素继承padding，如果没有父元素，则使用默认的padding。

示例代码：

.element {
  padding: unset;
}