CSSパディング

CSSマージンの結合 CSSの高さと幅
この要素のパディングは 70 ピクセルです。

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 属性に 4 つの値がある場合:

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • 下内边距是 75px
    • 左内边距是 100px

例

4 つの値を設定して padding 短縮属性を使用します。

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

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

padding 属性で 3 つの値が設定されている場合:

  • padding: 25px 50px 75px;
    • 上部のパディングは 25 ピクセルです
    • 左右のパディングは 50 ピクセル
    • 下部のパディングは 75 ピクセルです

例

3 つの値を設定して padding 短縮属性を使用します。

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

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

padding 属性で 2 つの値が設定されている場合:

  • p1adding: 25px 50px;
    • 上下のパディングは 25 ピクセル
    • 左右のパディングは 50 ピクセル

例

2 つの値を設定して padding 短縮プロパティを使用します。

div {
  padding: 25px 50px;
}

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

padding 属性で値が設定されている場合:

  • padding: 25px;
    • 4 つのパディングはすべて 25 ピクセルです

例

値を設定して padding 短縮プロパティを使用します。

div {
  padding: 25px;
}

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

パディングと要素の幅

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

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

例

ここで、<div> 要素の幅は 300px です。 ただし、<div> 要素の実際の幅は 350 ピクセル (300 ピクセル + 左パディング 25 ピクセル + 右パディング 25 ピクセル) になります。

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

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

パディングに関係なく幅を 300 ピクセルに保つには、box-sizing 属性を使用できます。 これにより、要素の幅が維持されます。 パディングを増やすと、コンテンツに使用できるスペースが減ります。

例

box-sizing プロパティを使用して、パディングに関係なく幅を 300 ピクセルに保ちます。

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

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

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

属性 説明
padding 1 つの宣言ですべてのパディング プロパティを設定するための短縮プロパティ。
padding-bottom は要素の下部パディングを設定します。
padding-left は要素の左パディングを設定します。
padding-right は要素の右パディングを設定します。
padding-top は要素の上部のパディングを設定します。
CSSマージンの結合 CSSの高さと幅