CSSのPaddingの指定が覚えられない人へ

「上（下左右），右（左），下，左」で指定されている

基本的には上から時計回りで書きます．
省略したところは，前に書いたものが適用されます．

ケーススタディ

padding: 20px;

• 上（下左右）が20px

結果： 上下左右が20px

padding: 20px 40px;

• 上（下左右）が20px
• 右（左）が40pxで上書き

結果： 上下 20px，左右40px

padding: 20px 40px 60px;

• 上（下左右）が20px
• 右（左）が40pxで上書き
• 下が60pxで上書き

結果： 上 20px，左右 40px，下 60px

padding: 20px 40px 60px 80px;

• 上（下左右）が20px
• 右（左）が40pxで上書き
• 下が60pxで上書き
• 左が80pxで上書き

結果： 上 20px，右 40px，下 60px，左 80px

まとめ

長年どういう指定順なんだ，とおもっていましたが，Prahaの人に「開始は上からで抜けたところが省略される感じ」と教えてもらってようやく合点がいきました．