CSS padding(填充)
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;
注意事项
- 填充会增加元素的尺寸。如果设置了固定尺寸的元素(如宽度和高度),请记得将填充值考虑在内,否则可能会使元素过大并且出现横向滚动条。
- 填充值不能为负数。
- 填充会影响元素内部的布局。这意味着填充会在元素内容的四周留出空白区域。