CSS 填充

填充区域是元素内容与其边界之间的空间。

CSS 填充属性

CSS 填充属性允许你为将边框与其内容分隔开的元素设置填充区域。填充受到框 background-color 的影响。

为单边指定填充

你可以使用 CSS 单个填充属性轻松地为元素的不同边指定不同的填充，例如顶部、右侧、底部或左侧。

h1 {
    padding-bottom: 10px;
}
p {
    padding-top: 20px;
    padding-left: 50px;
}

填充速记属性

padding 属性是一个速记属性，以避免对元件的每一侧上分别设置填充即 padding-top、padding-right、padding-bottom 和 padding-left。

h1 {
    padding: 10px 20px;
}
p {
    padding: 10px 15px 20px 25px;
}

注意： 与 CSS margin 属性不同，填充属性的值不能为负数。与 margin 属性一样，padding 属性的百分比值指的是生成的 box 包含块的宽度。

padding 属性可以采用一个、两个、三个或四个以空格分隔的值。

• 如果设置了一个值，则将其应用于所有四个边。
• 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于右侧和左侧。
• 如果指定了三个值，则第一个值应用于顶部，第二个值应用于左侧和右侧，最后一个值应用于底部。
• 如果指定了四个值，则它们将按指定顺序分别应用于顶部、右侧、底部和左侧。