CSS padding（パディング）

CSS padding（パディング）は、要素のボーダーと要素のコンテンツの間のスペース、つまり上下左右の内側パディングを定義する省略記法プロパティです。

padding（パディング）

要素の padding（内側パディング）がクリアされると、解放された領域は要素の背景色で埋められます。

padding プロパティを単独で使用すると、上下左右のパディングを変更できます。

取り得る値

パディング - 1辺ごとのパディングプロパティ

CSSでは、辺ごとに異なるパディングを指定できます：

• 上パディングは 25px
• 右パディングは 50px
• 下パディングは 25px
• 左パディングは 50px

パディング - 省略記法プロパティ

コードを短縮するために、1つのプロパティですべてのパディングプロパティを指定できます。

これは、いわゆる省略記法（ショートハンド）プロパティです。すべてのパディングプロパティの省略記法は次のとおりです。padding :

padding プロパティは、1〜4つの値を指定できます。

  padding:25px 50px 75px 100px;

• 上パディングは25px
• 右パディングは50px
• 下パディングは75px
• 左パディングは100px

  padding:25px 50px 75px;

• 上パディングは25px
• 左右のパディングは50px
• 下パディングは75px

  padding:25px 50px;

• 上下のパディングは25px
• 左右のパディングは50px

  padding:25px;

• すべてのパディングは25px

その他の例

1つの宣言内のすべてのパディングプロパティ
この例では、省略記法プロパティを使用して、1つの宣言内のすべてのパディングプロパティを設定する方法を示しています。値は1〜4つ指定できます。

左パディングを設定
この例では、要素の左パディングを設定する方法を示しています。

右パディングを設定
この例では、要素の右パディングを設定する方法を示しています。

上パディングを設定
この例では、要素の上パディングを設定する方法を示しています。

下パディングを設定
この例では、要素の下パディングを設定する方法を示しています。

すべてのCSSパディングプロパティ