CSS填充（padding）

CSS填充（padding）属性用于在一个元素的内容和边框之间创建空白区域。 填充可以帮助调整元素的布局，使文本与其他内容之间更具可读性。

语法

padding: top right bottom left;

其中：

• top：元素顶部的填充大小
• right：元素右侧的填充大小
• bottom：元素底部的填充大小
• left：元素左侧的填充大小

您也可以使用以下语法指定填充值：

padding: 10px; /* 上下左右填充大小相等 */
padding: 10px 20px; /* 上下填充大小为10px，左右填充大小为20px */
padding: 10px 20px 30px; /* 上填充大小为10px，左右填充大小为20px，下填充大小为30px */
padding: 10px 20px 30px 40px; /* 顶部填充大小为10px，右侧填充大小为20px，底部填充大小为30px，左侧填充大小为40px */

取值

填充可以使用以下单位：

• 像素（px）
• 英寸（in）
• 厘米（cm）
• 百分比（%）

此外，您还可以使用以下取值：

• inherit：从父元素继承填充值
• initial：设置为默认填充值

示例

/* 上下填充大小为10px，左右填充大小为20px */
padding: 10px 20px; 

/* 上填充大小为10px，左右填充大小为20px，下填充大小为30px */
padding: 10px 20px 30px; 

/* 顶部填充大小为10px，右侧填充大小为20px，底部填充大小为30px，左侧填充大小为40px */
padding: 10px 20px 30px 40px;

注意事项

• 填充会增加元素的尺寸。如果设置了固定尺寸的元素（如宽度和高度），请记得将填充值考虑在内，否则可能会使元素过大并且出现横向滚动条。
• 填充值不能为负数。
• 填充会影响元素内部的布局。这意味着填充会在元素内容的四周留出空白区域。