CSSパディング

CSSでパディングを操作する方法

ザ・paddingCSSプロパティは、要素の内側にスペースを追加するためにCSSで一般的に使用されます。

覚えておいてください:

  • margin要素の境界の外側にスペースを追加します
  • padding要素の境界線の内側にスペースを追加します

特定のパディングプロパティ

padding単一のエッジのパディングを一度に変更する4つの関連プロパティがあります。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

それらの使用法は非常に単純であり、混乱することはありません。次に例を示します。

padding-left: 30px;
padding-right: 3em;

を使用してpadding速記

paddingは、複数のパディング値を同時に指定するための省略形であり、入力された値の数に応じて、動作が異なります。

1つの値

単一の値を使用すると、それがに適用されますすべてパディング:上、右、下、左。

padding: 20px;

2つの値

2つの値を使用すると、最初の値がボトム&トップ、および2番目に左右

padding: 20px 10px;

3つの値

3つの値を使用すると、最初の値が、2番目に左右、3番目から

padding: 20px 10px 30px;

4つの値

4つの値を使用すると、最初の値が、2番目に正しい、3番目から、4番目から

padding: 20px 10px 5px 0px;

だから、順序は右上-左下

受け入れられる値

paddingあらゆる種類の長さの単位で表された値を受け入れます。最も一般的な値はpx、em、remですが、他にもたくさんあります

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: