CSS填充速記混淆

padding:45px 65px 95px;

爲什麼上面的速記將左填充的值甚至沒有給定時，會將左填充設置爲65px？CSS填充速記混淆

這對我有點困惑。

2012-06-04 MB34

這的確是令人困惑，但它只是爲CSS工作。如果您指定1值，它將用於所有四面。如果指定兩個，第一個將是top/bottom填充，第二個將是left/right。因此，當指定三個時，它會變爲top, left/right, bottom，回顯僅提供兩個值時的使用情況。

2012-06-04 14:48:36 Emily

我在猜測他們打算讓作者閱讀一個簡寫的方式，其中四個邊的三個值是'top，sides，bottom'。雖然這個規範並沒有給出任何技術要求。事實上，它暗示的是，未具體說明的價值是通過從相反的方面來計算的。 – BoltClock

的順序是：上，右，下，左

想想TRBL（麻煩）。或順時針。

使用速記時，如果沒有給出，則使用與相反的值。在你的情況下，使用65px爲左與65px從正確。

藉此進一步，如果我有：

padding: 10px 20px;

會導致10px爲左，右頂部和底部和20px。

最後：

padding: 10px;

會導致10px的一切。

2012-06-04 14:47:31

或者從12點開始順時針方向:) –

+1表示**順時針**方向。 :) – uday

-3

它的速記符號，通常你只提供2，不3個參數，如：

margin: 0 auto;

這意味着0在左側和右側的頂部和底部，汽車。

2012-06-04 14:47:48

除了問題不問關於2值的shorthands！ – BoltClock

-3

該命令是頂部，右側，底部，左側。當你省略了一個數字，它選擇了相反的值：

x = t=x, r=x, b=x, l=x 
x,y = t=x, r=y, b=x, l=y 
x,y,z = t=x, r=y, b=z, l=y

2012-06-04 14:48:30

這是錯誤的。它從他們的對立中複製缺失的那些。 –

修復了錯誤。 –

錯誤已修復，但解釋仍然錯誤。它不是「從頭開始」。 –

其實順序是上，右，下，左。如果只給出兩個值，則頂部&底部和左側&右側將採用相同的值。正如你已經給了65px的權利，所以它採取相同的左邊。

2012-06-04 14:49:44 SVS

速記符號總是從相反的值中複製缺失的元素。

padding: top right bottom left; 
padding: top right; // bottom = top, left = right 
padding: top right bottom; // left = right

2012-06-04 14:52:17

回答