css填充属性padding – CSS教程

上一章CSS教程请查看：css边距属性margin

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

CSS填充属性

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

为各个边定义填充padding

可以使用CSS的各个padding属性轻松地为元素的不同边指定不同的paddings，比如top、right、bottom或left side。

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

填充速记属性

padding属性是一个简写属性，用来避免为元素的每边单独设置padding，即：padding-top, padding-right, padding-bottom, padding-left。

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

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

• 填充属性可以包含一个、两个、三个或四个空白分隔值。
• 如果设置了一个值，它将应用于所有的四个边。
• 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于右侧和左侧。
• 如果指定了三个值，第一个值应用于顶部，第二个值应用于左侧和右侧，最后一个值应用于底部。
• 如果指定了四个值，它们分别按指定的顺序应用于顶部、右侧、底部和左侧。