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

自分で試してみる »

CSS padding

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

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

padding - 要素の各辺

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

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

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

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

注：負の値は使用できません。

padding - 一括指定プロパティ

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

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

では、どのように動作するかを以下に示します。

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

  • 上のpaddingは25px
  • 右のpaddingは50px
  • 下のpaddingは75px
  • 左のpaddingは100px

• padding: 25px 50px 75px;

  • 上のpaddingは25px
  • 左右のpaddingは50px
  • 下のpaddingは75px

• padding: 25px 50px;

  • 上下のpaddingは25px
  • 左右のpaddingは50px

• padding: 25px;

  • 4つのpaddingはすべて25pxです

paddingと要素の幅

CSSのwidthプロパティは、要素のコンテンツ領域の幅を指定します。コンテンツ領域は、要素（ボックスモデル）のpadding、border、およびmarginの内側の部分です。

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

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

その他の例

左のpadingを設定する
この例は、<p>要素の左paddingを設定する方法を示しています。

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

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

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

すべてのCSSのpaddingプロパティ

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