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