TECH I.S.

CSSのpaddingとは？余白の指定方法について

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

この要素のpaddingは70pxです。



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が親要素から継承されることを指定します

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

例

<div>要素の4つの側面すべてに異なるpaddingを設定します。

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

padding - 一括指定プロパティ

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

paddingプロパティは、次の個々のpaddingプロパティの一括指定プロパティです。
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

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

paddingプロパティに4つの値がある場合:

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

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

例

次の4つの値を持つpaddingの一括指定プロパティを使用します。

div {   padding: 25px 50px 75px 100px; }

paddingプロパティに3つの値がある場合:

  • padding: 25px 50px 75px;

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

例

次の3つの値を持つpaddingの一括指定プロパティを使用します。

div {   padding: 25px 50px 75px; }

paddingプロパティに2つの値がある場合:

  • padding: 25px 50px;

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

例

次の2つの値を持つpaddingの一括指定プロパティを使用します。

div {   padding: 25px 50px; }

paddingプロパティの値が1つの場合:

  • padding: 25px;

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

例

paddingの一括指定プロパティを1つの値で使用します。

div {   padding: 25px; }

paddingと要素の幅

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

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

例

ここでは、<div>要素に300pxの幅が与えられています。ただし、<div>要素の実際の幅は350px(300px + padding-left:25px + padding-right:25px)になります。

div {   width: 300px;   padding: 25px; }

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

例

box-sizingプロパティを使用して、paddingの量に関係なく、幅を300pxに保ちます。

div {   width: 300px;   padding: 25px;   box-sizing: border-box; }

その他の例

左の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を設定します


チュートリアル