CSS パディング
この要素には70pxのパディングがあります。
CSS パディングプロパティ
CSSのパディングプロパティは、要素の内容の周囲にスペースを作成するために使用されます。これにより、定義されたボーダーの内側にスペースが作られます。
CSSを使用すると、パディングを完全に制御できます。要素の各側面（上、右、下、左）のパディングを設定するプロパティがあります。
パディング – 個々の側面
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;
}パディング – ショートハンドプロパティ
コードを短縮するために、すべてのパディングプロパティを1つのプロパティで指定することができます。
paddingプロパティは、以下の個々のパディングプロパティのショートハンドプロパティです：
- padding-top
- padding-right
- padding-bottom
- padding-left
以下はその動作方法です：
paddingプロパティに4つの値がある場合：
padding: 25px 50px 75px 100px;- 上のパディングは25px
- 右のパディングは50px
- 下のパディングは75px
- 左のパディングは100px
例
4つの値を持つパディングショートハンドプロパティを使用します：
div {
padding: 25px 50px 75px 100px;
}paddingプロパティに3つの値がある場合：
padding: 25px 50px 75px;- 上のパディングは25px
- 右と左のパディングは50px
- 下のパディングは75px
例
3つの値を持つパディングショートハンドプロパティを使用します：
div {
padding: 25px 50px 75px;
}paddingプロパティに2つの値がある場合：
padding: 25px 50px;- 上下のパディングは25px
- 右左のパディングは50px
例
2つの値を持つパディングショートハンドプロパティを使用します：
div {
padding: 25px 50px;
}paddingプロパティに1つの値がある場合：
padding: 25px;- すべての側面のパディングは25px
例
1つの値を持つパディングショートハンドプロパティを使用します：
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 | すべてのパディングプロパティを1つの宣言で設定するためのショートハンドプロパティ |
| padding-bottom | 要素の下パディングを設定します |
| padding-left | 要素の左パディングを設定します |
| padding-right | 要素の右パディングを設定します |
| padding-top | 要素の上パディングを設定します |