CSS填充是CSS框模型的属性之一。此速记属性设置HTML元素所有四个边的填充。CSS填充几乎可以应用于每个HTML标记（除了一些表标记）。此外，元素的所有四边都可以具有不同的值。

css填充属性

要使用速记CSS填充属性，您可以使用助记符“麻烦”（对于星际迷航迷来说，也可以使用“TRiBbLe”）。这表示顶部、右侧、底部和左侧，它指的是您在“速记”属性中设置的填充宽度的顺序。例如：

如果您使用上面列出的值，它将对您要应用它的HTML元素的每一侧应用不同的填充值。如果要将相同的填充应用于所有四个面，可以简化CSS，只需编写一个值：

使用这行CSS，12个像素的填充将应用于元素的所有4个边。

如果希望顶部和底部以及左侧和右侧的填充相同，可以写入两个值：

第一个值（24px）将应用于顶部和底部，而第二个值将应用于左侧和右侧。

如果写入三个值，将使水平填充（左和右）相同，同时更改顶部和底部：

根据CSS框模型，填充最接近元素/内容本身。这意味着将填充添加到内容宽度或高度与您使用的任何边框值之间的元素中。如果填充设置为零，则它与内容具有相同的边。

css填充值

CSS填充可以采用任何非负长度值。确保指定测量值，例如px或em。您还可以指定填充的百分比，即元素包含块宽度的百分比。这包括顶部和底部填充。例如：

#container元素内段落的高度为#container高度的75%，加上顶部填充宽度的25%，底部填充宽度的25%。总计为300+200+200=700px。

添加css填充的效果

在块级元素上，填充应用于四边。由于图元已经是块或长方体，因此填充将应用于长方体的侧面。

将CSS填充添加到内联元素时，如果垂直填充超过了行高度，则内联元素上方和下方的元素可能会有一些重叠，但不会向下推行高度。应用于内联元素的水平CSS填充将添加到元素的开头和结尾。填充物可以包裹线条。但它不会应用于多行元素的所有行，因此不能使用填充来缩进多行内联内容的一段。

此外，在CSS2.1中，不能创建宽度取决于元素的宽度百分比（或填充宽度）的容器块。如果你这样做，结果是未定义的。浏览器仍将显示内容，但您可能无法获得预期的结果。如果您仔细想想，这是有道理的，因为如果您的容器元素需要知道其子元素的宽度才能定义其宽度，例如，当它没有预定义的宽度，并且一个或多个容器元素的宽度设置为容器元素的百分比时，这将设置一个没有答案的循环链。如果使用百分比表示文档中任何内容的宽度，则应确保还定义了父元素宽度。