CSS 填充是CSS框模型的属性之一。 这个简写属性为HTML元素的所有四边设置填充。 几乎所有的HTML标签都可以应用CSS填充（除了一些表标签）。 此外，元素的所有四边可以有不同的值。
CSS填充属性
要使用简写的CSS填充属性，可以使用助记符“TROUBLe”（或“星际迷航”粉丝的“TRiBbLe”）。 这代表顶部 ， 右侧 ， 底部和左侧 ，它表示您在速记属性中设置的填充宽度的顺序。 例如：
填充：右上角的左下角; padding：1px 2px 3px 6px;如果您使用了上面列出的值，那么它会将不同的填充值应用于您要应用它的任何HTML元素的每一侧。 如果你想在所有四边应用相同的填充，你可以简化你的CSS并且只写一个值：
填充：12px;用这行CSS，12个像素的填充将应用于元素的所有4边。
如果您希望填充的顶部和底部以及左侧和右侧的填充相同，则可以编写两个值：
padding：24px 48px;第一个值（24px）将应用于顶部和底部，而第二个值将应用于左侧和右侧。
如果你写了三个值，这将使水平填充（左和右）相同，同时更改顶部和底部：
填充：左上角和右下角; padding：0px 1px 3px;根据CSS框模型，填充最接近元素/内容本身。 这意味着将填充添加到内容宽度或高度与您使用的任何边框值之间的元素中。 如果填充设置为零，则它与内容具有相同的边缘。
CSS填充值
CSS填充可以取任何非负值的长度值。 务必指定测量值，例如px或em。 你也可以为你的填充指定一个百分比，这个百分比是元素所在块的宽度的百分比。 这包括顶部和底部填充。 例如：
#container {width：800px; height：200px; } #container p {width：400px; 身高：75％; 填充：25％0; }#container元素中段落的高度为#container高度的75％，加上顶部填充宽度的25％和底部填充的25％宽度。 这总计300 + 200 + 200 = 700px。
添加CSS填充的效果
在块级元素上，四边应用填充。 由于元素已经是块或框，因此填充将应用于框的两侧。
当向内联元素添加CSS填充时，如果垂直填充超过了行高，则内联元素上方和下方的元素可能会重叠，但不会将行高降低。 应用于内联元素的横向CSS填充将被添加到元素的开始和元素的结尾。 填充可能会包裹线条。 但它不适用于多行元素的所有行，因此您不能使用填充缩进多行内联内容的一部分。
另外，在CSS2.1中，不能创建容器块，其宽度取决于具有宽度百分比（或填充宽度）的元素。 如果你这样做的结果是未定义的。 浏览器仍会显示内容，但您可能无法获得您期望的结果。 如果你仔细想一想，就好像你的容器元素需要知道它的子元素的宽度来定义它的宽度 - 比如它没有预定义的宽度，并且一个或多个元素具有一个宽度设置为容器元素的百分比，这会设置一个没有答案的循环链。 如果在文档上使用百分比来表示任何东西的宽度，则应确保父元素宽度也已定义。