CSS 内边距 padding

在 CSS 盒模型中，内边距是内容区域以外边框以内的空白空间。

单边内边距

元素内容区的上下左右四个方向都可以单独定义内边距，4 个单边内边距属性分别是：

padding-top: 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

单边内边距的语法： padding-top: 尺寸

内边距取值有：

auto - 浏览器自动计算内边距
inherit - 取父元素的内边距
具体长度 - 以 px、pt、cm 等为单位指定内边距。
百分比 - 以元素宽度的百分比为计算内边距

为

元素的所有四个边设置不同的边距：

p {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 150px;
  padding-left: 80px;
}

padding

padding 是上下左右 4 个方向单边内边距属性的简化属性，其值可能为 1 - 4 个值。

padding: 10px; /* 4 个方向的内边距相同 */
padding: 10px 20px; /* 分别设置 “上下” “左右”方向的内边距 */
padding: 10px 20px 30px; /* 分别设置 “上” “左右” “下” 方向的内边距 */
padding: 10px 20px 30px 40px; /* 分别设置 “上” “右” “下” “左” 方向的内边距 */

关于 padding 值的个数的说明：

1 个值：4 个方向具有相同的内边距
2 个值：按参数顺序分别设置 “上下” “左右” 方向的内边距
3 个值：按参数顺序分别设置 “上” “左右” “下” 方向的内边距
4 个值：按参数顺序分别设置 “上” “右” “下” “左” 方向的内边距

自动边距 `auto`

将 padding 属性设置为 auto 可以让元素在容器内水平居中。元素占据指定宽度的空间后，剩余的空间将在左右边距之间平均分配。

使用自动边距让元素居中：

div {
  width: 300px;
  padding: auto;
  border: 1px solid red;
}

继承的内边距 `inherit`

将 padding 属性设置为 inherit 会继承父元素的内边距。

使用 inherit 设置内边距：

div {
  border: 1px solid red;
  padding-left: 100px;
}

p.ex1 {
  padding-left: inherit;
}

所有 CSS 边距属性

内边距属性	说明
`padding`	内边距的简写属性
`padding-bottom`	设置下内边距
`padding-left`	设置左内边距
`padding-right`	设置右内边距
`padding-top`	设置上内边距