CSS 填充 - CSS

简介

填充（Padding）是 CSS 盒子模型的一个属性，它定义了一个元素的内容区域和边框之间的间距。CSS 中的填充是通过 padding 属性来设置的。

语法

padding: top right bottom left;

或者

padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

其中，value 可以是一个用于定义填充的数字（px、em、rem等）或百分比值。

用法

通过 padding 属性定义填充时，你可以为每个方向指定一个值，例如：

div {
    padding: 10px 20px 30px 40px;
}

也可以省略某些值，如果省略了某个值，那该值将等于与该值相对的值，如：

div {
    padding: 10px 20px;
}

这表示元素的上下边距为10像素，左右边距为20像素。

你还可以使用 padding-top、padding-right、padding-bottom 和 padding-left 属性为元素指定特定方向的填充，例如：

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

注意事项

• 填充值必须是非负数。
• 如果你设置了一个元素的填充，那么元素的内容区域大小是由内容的宽度和高度加上填充值计算得到的。
• 填充永远不会影响上下文盒子的大小。例如，如果一个元素在页面中的宽度是100像素，设置10像素填充，那么该元素在页面上的宽度仍然是100像素，而内容区域的宽度将缩小为80像素。
• 如果你为一个元素设置了边框和填充值，那么盒子的总宽度将是由内容宽度、填充和边框宽度计算得到的。
• 如果你想为一个元素的内部内容提供空间，使用填充是比较好的方法。如果你为一个元素设置了 margin 或 border，它们可能会对其他被紧贴在元素旁边的元素产生影响。

深入了解填充，请参考 CSS 填充。