填充用于在任何定义的边框内在元素内容周围创建空间。

CSS padding

CSS padding属性用于在周围生成空间元素的内容，位于任何定义的边框内。

使用 CSS，可以完全控制填充。为元素的每一侧（顶部、右侧、底部和左侧）设置填充。

单边填充

• padding-top
• padding-right
• padding-bottom
• padding-left

所有填充属性都可以具有以下值：

• 长度 - 指定以 px、pt、cm 等为单位的填充。
• %- 以包含元素宽度的百分比指定填充
• inherit - 指定填充应从父元素继承

注意：不允许使用负值。

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

也可以使用padding缩写

div {
  padding: 25px 50px 75px 100px;
}

div {
  padding: 25px 50px 75px;
}

div {
  padding: 25px 50px;
}

div {
  padding: 25px;
}

填充和元素宽度

CSS 属性width指定元素内容区域的宽度。这内容区域是元素的填充、边框和边距内的部分 。

因此，如果元素具有指定的宽度，则添加到该元素的填充将 添加到元素的总宽度中。这通常是一个不希望的结果。

在这里，<div> 元素的宽度为300px。 但是，<div> 元素的实际宽度为 350px （300px + 25px 的左填充 + 25px 的右填充）：

div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持在 300px，无论填充量如何，都可以使用该属性。这会导致元素保持其实际宽度;如果增加填充，可用内容空间将减少。 box-sizing

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}