パディングは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを作成するために使用されます。

自分で試してみる »

CSS パディング

CSSpaddingプロパティは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを生成するために使用されます。

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

パディング - 個々の側面

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

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

パディングプロパティはすべて、次の値を持つことができます。

• 長さ - px、pt、cm などでパディングを指定します。
• % - 含まれる要素の幅の % でパディングを指定します
• inherit - パディングが親要素から継承されることを指定します

ノート：負の値は使用できません。

パディング - 短縮プロパティ

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

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

したがって、これがどのように機能するかです：

• padding: 25px 50px 75px 100px;

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

• パディング: 25px 50px 75px;

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

• パディング: 25px 50px;

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

• padding: 25px;

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

パディングと要素の幅

CSSwidthプロパティは、要素のコンテンツ領域の幅を指定します。コンテンツ領域は、要素のパディング、ボーダー、およびマージンの内側の部分です（ボックスモデル）。

したがって、要素に指定された幅がある場合、その要素に追加されたパディングは、要素の合計幅に追加されます。これは多くの場合、望ましくない結果です。

パディングの量に関係なく、幅を 300 ピクセルに保つには、box-sizingプロパティを使用できます。これにより、要素は実際の幅を維持します。パディングを増やすと、使用可能なコンテンツスペースが減少します。

その他の例

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

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

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

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

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

プロパティ	説明
padding	1つの宣言ですべてのパディングプロパティを設定するための簡略プロパティ
padding-bottom	要素の下パディングを設定します
padding-left	要素の左パディングを設定します
padding-right	要素の右パディングを設定します
padding-top	要素の上パディングを設定します