CSSパディングプロパティ設定

CSSパディングプロパティの設定

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 top、8px rightを宣言しています。パディングルールに従います–The undeclared values are taken from the opposing side、「上」の値は「下」に割り当てられ、「右」の値は「左」にも割り当てられます。

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

3）パディング：10px 8px 10px;

これは最も紛らわしい設定です。ここでは、上10ピクセル、右8ピクセル、下10ピクセルを宣言します。パディングルールに従います–The undeclared values are taken from the opposing side、「右」の値は「左」に割り当てられます。

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

4）パディング：10px;

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

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

結論

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

例えば、

padding: 10px 8px 10px 9px;

と同等です

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

私は、padding-topやpadding-rightのような複数行のCSSパディングプロパティ設定を好むので、コードはクリーンで保守が容易です。なぜ多くのWeb開発者が物事を複雑にしたいのですか？ 1行のパディングプロパティにより、よりプロフェッショナルになりますか？

TOC