CSS パディング

CSS パディング・プロパティ

CSS padding プロパティは、コンテンツの周りにスペースを生成するために使用します。

パディング・プロパティは、要素のコンテンツと要素のボーダーとの間の空白のサイズを設定します。

この要素のパディングは 50px です。

CSS パディング・プロパティは、要素のコンテンツと要素のボーダーとの間のスペースを定義します。

パディングは、要素のコンテンツ周りの領域(ボーダーの内側)をクリアします。

注: パディングは、要素の背景色の影響を受けます！

CSS を使用することで、パディングを完全に制御できます。要素の各サイド（上、右、下、左）にパディングを設定するための CSS プロパティがあります。

CSS には、要素の各サイドにパディングを指定するためのプロパティがあります：

すべてのパディング・プロパティには、次の値を指定できます：

次の例は、 要素の 4 つのサイドに異なったパディングを設定します：

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

コードを短くするために、1 つのプロパティで全てのパディング・プロパティを指定することが可能です。

全パディング・プロパティのショートハンドプロパティは"padding"です:

padding プロパティは次の全ての個別パディング・プロパティに対するショートハンド・プロパティです：

p {
padding: 50px 30px 50px 80px;
}

それがどう動作するかを以下に示します：

padding プロパティに 4 つの値を指定した場合：

padding: 25px 50px 75px 100px;
- 上パディングが 25px
- 右パディングが 50px
- 下パディングが 75px
- 左パディングが 100px

padding プロパティに 3 つの値を指定した場合：

padding プロパティに 2 つの値を指定した場合：

padding プロパティに１つの値を指定した場合：

1 回の宣言で全てのパディングプロパティを設定
この例は、1〜4 個の値を持つことのできるパディングプロパティを、1回の宣言で全てを設定するためのショートハンドプロパティのデモです。

左パディングの設定
この例は、 要素の左パディングを設定する方法のデモです。

右パディングの設定
この例は、 要素の右パディングを設定する方法のデモです。

上パディングの設定
この例は、 要素の上パディングを設定する方法のデモです。

下パディングの設定
この例は、 要素の下パディングを設定する方法のデモです。

プロパティ	説明
padding	1 回の宣言で全てのパディングプロパティを設定するためのショートハンド・プロパティ
padding-bottom	要素の下パディングを設定する
padding-left	要素の左パディングを設定する
padding-right	要素の右パディングを設定する
padding-top	要素の上パディングを設定する