CSS 内枠線

この要素のインセットは70pxです。

CSS 内枠線

CSS padding 属性は、定義された境界内の要素の内容の周りにスペースを生成するために使用されます。

CSSを使えば、インセット（余白）を完全に制御できます。各側（上、右、下、左）にインセットを設定するためのいくつかの属性があります。

Padding - 独自の側

CSSには、要素の各側にインセットを指定するための属性があります：

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

すべてのインセット属性は以下の値を設定できます：

  • length - px、pt、cmなどの単位でインセットを指定
  • % - 包含要素の幅のパーセントでインセットを指定
  • inherit - 親要素からインセットを継承するように指定

ヒント：負の値は許可されていません。

例

<div>要素のすべての4つの側に異なるインセットを設定するには：

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

自分で試してみてください

Padding - 略記属性

コードを短くするために、すべてのインセット属性を1つの属性で指定することができます。

padding 属性是以下各内边距属性的简写属性：

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

属性は以下の各内余白属性のショートカット属性です：

padding: 25px 50px; padding 動作原理は以下の通りです：

  • padding 簡略属性に4つの値を設定します：
    • 属性に3つの値を設定します：
    • 属性には4つの値があります：
    • 上内余白は 25px です
    • 右内余白は 50px です

例

左内余白は 100px です

div {
  padding 簡略属性に4つの値を設定します：
}

自分で試してみてください

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

  • padding 簡略属性に3つの値を設定します：
    • 属性に3つの値を設定します：
    • 上と下内余白は 25px です
    • 上内余白は 25px です

例

下内余白は 75px です

div {
  padding 簡略属性に3つの値を設定します：
}

自分で試してみてください

padding: 25px 50px; padding padding: 25px 50px 75px;

  • padding 簡略属性に2つの値を設定します：
    • 属性に2つの値を設定します：
    • 上と下内余白は 25px です

例

右と左内余白は 50px です

div {
  padding 簡略属性に2つの値を設定します：
}

自分で試してみてください

padding: 25px 50px; padding 属性に値を設定します：

  • padding: 25px;
    • すべての4つの内余白は 25px です

例

padding 簡略属性に値を設定します：

div {
  padding: 25px;
}

自分で試してみてください

内余白と要素の幅

CSS width 属性は、要素の内容エリアの幅を指定します。内容エリアは、要素（ボックスモデル）の内余白、枠線、および外余白の内側の部分です。

したがって、要素に指定された幅がある場合、内余白を追加すると、要素の合計幅に加算されます。これは通常不希望の結果です。

例

ここでは、<div>要素の幅は 300px です。しかし、<div>要素の実際の幅は 350px になります（300px + 左内余白 25px + 右内余白 25px）：

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

自分で試してみてください

どのような内余白がある場合でも幅を 300px に保つには、以下を使用できます： box-sizing 属性。これにより、要素の幅が保たれます。内余白を増加させると、利用可能なコンテンツスペースが減少します。

例

box-sizing 属性を使用して、どのような内余白がある場合でも幅を 300px に保ちます：

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

自分で試してみてください

さらに多くの例

左内余白の設定
この例では、<p>要素の左内余白の設定方法を示します。
右内余白の設定
この例では、<p>要素の右内余白の設定方法を示します。
上内余白の設定
この例では、<p>要素の上内余白の設定方法を示します。
下内余白の設定
この例では、<p>要素の下内余白の設定方法を示します。

すべての CSS 内余白属性

属性 説明
padding 一つの宣言ですべての内余白属性を設定するショートカット属性です。
padding-bottom 要素の下内余白を設定します。
padding-left 要素の左内余白を設定します。
padding-right 要素の右内余白を設定します。
padding-top 要素の上内余白を設定します。

関連リーダー

课外書：ボックスモデル：CSS 内余白