CSS 填充

在本教程中，您将学习如何使用 CSS 调整元素的填充区域。

CSS 填充属性

CSS padding 属性允许您设置元素内容与其边框（或元素框的边缘，如果它没有定义的边框）之间的间距。

填充受元素的 background-color 影响。 例如，如果您为元素设置背景颜色，它将通过填充区域可见。

为各个边定义填充

您可以分别使用 CSS padding-top, padding-right, padding-bottom, 和 padding-left 属性为元素的各个边指定填充，例如顶部、右侧、底部和左侧。 让我们尝试一个例子来了解它是如何工作的：

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

可以使用以下值指定填充属性：

• length - 以 px、em、rem、pt、cm 等指定填充。
• % - 指定包含元素宽度的百分比 (%) 填充。
• inherit - 指定应从父元素继承填充。

与 CSS 边距 不同，内边距属性的值不能为负数。

填充速记属性

padding 属性是一个简写属性，以避免单独设置每一边的填充，即 padding-top, padding-right, padding-bottom 和 padding-left。

让我们看一下以下示例，以了解其基本工作原理：

h1 {
    padding: 50px; /* 适用于所有四个边 */
}
p {
    padding: 25px 75px; /* 垂直 | 水平 */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

这种速记符号可以采用一个、两个、三个或四个空格分隔的值。

• 如果指定了一个值，它将应用于所有四个边。
• 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于元素框的左右。
• 如果指定了三个值，则第一个值应用于顶部，第二个值应用于左右，最后一个值应用于底部。
• 如果指定了四个值，则按照指定的顺序分别应用到元素框的顶部, 右侧, 底部 和 左侧。

建议使用速记属性，它可以帮助您避免额外的输入，从而节省一些时间，并使您的 CSS 代码更易于遵循和维护。

填充和边框对布局的影响

在创建网页布局时，为元素添加内边距或边框有时会产生意想不到的结果，因为内边距和边框会添加到元素生成的框的宽度和高度，正如您在 CSS 盒子模型章节。

例如，如果您将 <div> 元素的宽度设置为 100% 并在其上应用左右填充或边框，则会出现水平滚动条。 让我们看一个例子：

div {
    width: 100%;
    padding: 25px;
}

为了防止填充和边框改变元素的盒子宽度和高度，您可以使用 CSS box-sizing 属性。 在下面的示例中，<div> 框的宽度和高度将保持不变，但是，它的内容区域会随着填充或边框的增加而减小。

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

您将在接下来的章节中详细了解 CSS 盒子大小调整 功能。