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中，不能創建容器塊，其寬度取決於具有寬度百分比（或填充寬度）的元素。 如果你這樣做的結果是未定義的。 瀏覽器仍會顯示內容，但您可能無法獲得您期望的結果。 如果你仔細想一想，就好像你的容器元素需要知道它的子元素的寬度來定義它的寬度 - 比如它沒有預定義的寬度，並且一個或多個元素具有一個寬度設置為容器元素的百分比，這會設置一個沒有答案的循環鏈。 如果在文檔上使用百分比來表示任何東西的寬度，則應確保父元素寬度也已定義。