CSS Padding(填充)

CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

CSS填充属性

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

为各个面定义填充

您可以使用CSS单独的padding属性轻松地为元素的不同侧(例如,顶部,右侧,底部或左侧)指定不同的填充。

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属性不同,填充属性的值不能为负。与边距属性一样,填充属性的百分比值是指生成的框的包含块的宽度。

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

  • 如果设置一个值,则将其应用于所有四个侧面。

  • 如果指定了两个值,则第一个值将应用于顶部和底部,第二个值将应用于右侧和左侧。

  • 如果指定了三个值,则第一个值应用于顶部,第二个值应用于左侧和右侧,最后一个值应用于底部。

  • 如果指定了四个值,则将它们分别以指定的顺序应用于顶部,右侧,底部和左侧。