CSS Paddingプロパティ設定は、1つの値、2つの値、3つまたは4つの値を一緒に受け入れることができるため、いつか混乱します。

たとえば、以下のすべてのパディングプロパティ設定が有効です。

padding: 10px;
padding: 10px 8px;
padding: 10px 8px 10px;
padding: 10px 8px 10px 9px;

CSSパディングルール.

{空} 1)CSSパディングの順序は、次のように時計回りの順序に従います

padding: top  right  bottom left

2)宣言されていない値は反対側から取られます

CSSパディングの例

1)パディング:10px 8px 10px 9px;

4つの値はわかりやすいです。

結果は、10pxの上、8pxの右、10pxの下と9pxの左です。

2)パディング:10px 8px;

2つの値も明確です。ここでは、10pxの上、8pxの右を宣言します。

パッディングルールに従う – __宣言されていない値は反対側から取られます。 “Top”値は “Bottom”に割り当てられ、 “Right”値は “Left”に割り当てられます。

結果は10pxの上、8pxの右、10pxの下と8pxの左

3)パディング:10px 8px 10px;

これは最も混乱する設定です。ここでは、10pxの上、8pxの右と10pxの下を宣言します。パディングルールに従います – 宣言されていない値は反対側から取り出され、__ “右”の値は “左”に割り当てられます。

結果は、10pxの上、8pxの右、10pxの下と8pxの左です。

4)パディング:10px;

このプロパティの設定は少し特殊ですが、設定はすべての上、右、下、左の値に適用されます。

結果は、10pxのトップ、10pxのright、10pxのボトム、10pxのleftです。

結論

実際には、この1行のCSSパディングプロパティ設定を行う別の方法は、1)padding-top:2)padding-right:3)padding-bottom:4)padding-left:

例えば、

padding: 10px 8px 10px 9px;

padding-top:10px;
padding-right:8px;
padding-bottom:10px;
padding-left:9px;

私は、パディングトップやパディングライトのような複数行のCSSパディングプロパティの設定をもっと好みます。コードは清潔で維持しやすいです。

なぜそんなに多くのウェブ開発者が物事を複雑にしたいのですか? 1行のパディングプロパティでよりプロフェッショナルになりますか?