CSS 中的 padding（内边距）属性用于定义元素的边框与元素内容之间的空间。它属于盒模型（Box Model）的一部分，控制着元素内容区域与其边框之间的距离。

基本概念

padding 是一个简写属性，可以同时设置元素四个方向（上、右、下、左）的内边距。每个方向都可以单独设置，例如 padding-top、padding-right、padding-bottom 和 padding-left。

语法格式

padding 属性可以接受一个到四个值，其顺序为：

• ‌一个值‌：设置所有四个方向的内边距相同。

  padding: 10px;

• ‌两个值‌：第一个值设置上下内边距，第二个值设置左右内边距。

  padding: 10px 20px;

• ‌三个值‌：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距。

  padding: 10px 20px 30px;

• ‌四个值‌：分别设置上、右、下、左的内边距，按顺时针方向排列。

  padding: 10px 20px 30px 40px;

可用单位

padding 的值可以是以下单位：

• ‌长度值‌：如 px、em、rem、pt 等。

• ‌百分比值‌：相对于父元素的宽度计算。

• ‌关键字‌：如 inherit（继承父元素的 padding 值）。

注意：padding 不允许使用负值。

示例

p {
  padding: 10px 20px 15px 5px;
}

表示：

• 上内边距为 10px

• 右内边距为 20px

• 下内边距为 15px

• 左内边距为 5px

也可以分别设置：

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

特点

• padding 是元素内容区域的一部分，会影响元素的总宽度和高度。

• 如果一个元素设置了 width 和 padding，则实际占用的空间为 width + padding。

• padding 的百分比值是相对于父元素的宽度计算的。

通过合理使用 padding，可以有效控制元素内部内容与边框之间的间距，从而提升页面布局的美观性和用户体验。