填充属性用于控制元素内部、元素边缘或者边界内的空间。

有时在某些元素上使用填充而不是边距可能更好，这是因为顶部和底部边距可能会折叠。

例如，如果我们将段落顶部的边距设置为 1em，将段落底部的边距设置为 2em，我们最终会在 2em 的元素之间留出一个空格，而不是——通常——直观预期的 3em。

与 margin 不同，padding 的值不能为负。

所有四个边都可以通过简写来控制，或者通过用于单独定位每一边的属性来控制。
：

div {
  padding-top: 1em;
  padding-right: 0.5em;
  padding-bottom: 2em;
  padding-left: 1em;
}

速记等效项是：

div {
  padding: 1em 0.5em 2em 1em; /* top right bottom left */
}

此外，也可以省略一些元素边，如果这样做，将使用另一边的值。
IE。

p {
  padding: 1em 0.5em; /* top right bottom left */
}

以上还设置了所有四个边框。
顶部和底部共享 1em padding，左右共享 0.5em padding。

在以下情况下使用填充：

• 我们希望我们创建的空间位于元素边界或者边缘内。
• 我们不希望背景被添加的空间“推动”。
• 我们想避免折叠段落的边距。

除了上述之外，是否使用边距或者填充通常取决于个人喜好，但根据经验，如果没有完成我们想要的，可能值得我们花时间进行一些试验。

可能的值

• auto (Default)
• Units of Measurement
• initial
• inherit

属性