CSS 填充

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

CSS 填充属性

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

为单边指定填充

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

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

填充速记属性

padding 属性是一个速记属性,以避免对元件的每一侧上分别设置填充即 padding-toppadding-rightpadding-bottompadding-left

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

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

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

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