在本教程中，我们将学习CSS填充。

在上图中，绿色区域是蓝色突出显示的元素的填充。

填充

它是元素的边界和内容之间的区域。

我们可以在长度，百分比和继承中设置padding的值。
没有用于填充的"自动"值。

我们使用px，mm，cm等来设置长度的填充。

在以下代码中，我们将填充设置为15px。

div {
	padding : 15px;
}

当padding设置为0时，我们不使用px单位。

div {
	padding : 0;
}

要从父级继承填充，我们对padding属性使用inherit值。

默认情况下，填充值不从父元素继承。

我们不能使用负值进行填充。

填充全部4个面

为了获得更好的控制，我们可以使用以下属性分别为每侧设置填充。

• 顶部填充 (padding-top)
• 向右填充 (padding-right)
• 底部填充 (padding-bottom)
• 左填充 (padding-left)

在下面的示例中，我们设置了具有类"容器"的div元素的每一侧的填充。

div.container {
	padding-top : 30px;
	padding-right : 15px;
	padding-bottom : 10px;
	padding-left : 5%;
}

填充速记

我们可以使用以下速记来设置每侧的填充。

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

上面的规则将设置：

• padding-top = 30px
• padding-right = 15px
• padding-bottom = 10px
• padding-left= 5％

div {
	padding : 30px 15px 10px;
}

上面的规则将设置：

• padding-top = 30px
• padding-right = 15px
• padding-bottom = 10px
• padding-left = 15px

div {
	padding : 30px 15px;
}

上面的规则将设置：

• padding-top = 30px
• padding-right = 15px
• padding-bottom = 30px
• padding-left = 15px

div {
	padding : 30px;
}

上面的规则将设置：

• padding-top = 30px
• padding-right = 30px
• padding-bottom = 30px
• padding-left = 30px

继承填充

在下面的示例中，子元素将从父元素继承填充。

div.container {
	padding : 15px;
}

div.container p {
	padding : inherit;
}