CSS padding(填充)

在 CSS 中,padding 属性用于控制元素内部内容与边框之间的间距。通过设置 padding,可以调整元素内部内容与边框之间的空白区域,从而让页面看起来更加美观和整洁。

语法

padding 属性的语法如下:

-------- --- ----- ------ -----
  • top:设置元素的顶部填充值
  • right:设置元素的右侧填充值
  • bottom:设置元素的底部填充值
  • left:设置元素的左侧填充值

填充值可以使用绝对单位(如 px、em、rem)或相对单位(如 %)来指定。

示例

以下是一个简单的示例,演示如何使用 padding 属性来设置元素的填充值:

--- -
  -------- -----
-

在上面的示例中,我们为一个 div 元素设置了 20px 的填充值,这意味着该元素的内部内容与边框之间将有 20px 的空白区域。

多值语法

除了设置统一的填充值外,还可以使用多值语法来分别设置元素的上、右、下、左填充值。例如:

--- -
  -------- ---- ---- ---- ----
-

在这个示例中,我们为一个 div 元素分别设置了上、右、下、左四个方向的填充值,分别为 10px、20px、15px、5px。

百分比填充值

除了使用绝对单位来指定填充值外,还可以使用百分比来指定填充值。例如:

--- -
  -------- -- --- -- ----
-

在这个示例中,我们为一个 div 元素设置了上、右、下、左四个方向的填充值,分别为元素宽度和高度的 5% 和 10%。

通过合理地运用 padding 属性,可以让页面布局更加灵活,元素之间的间距更加美观。


上一篇:CSS margin(外边距)
下一篇:CSS 分组 和 嵌套 选择器