CSS パディング (Padding)

CSSの padding プロパティは、要素のコンテンツの周囲（設定されたボーダーの内側）にスペースを作成するために使用されます。

CSSを使用すると、パディングを完全に制御できます。要素の各サイド（上、右、下、左）に対してパディングを設定するプロパティが存在します。

1. パディング - 個別のサイド指定 (Padding - Individual Sides)

CSSには、要素の各サイドに対して個別にパディングを指定するプロパティがあります。

• padding-top（上パディング）
• padding-right（右パディング）
• padding-bottom（下パディング）
• padding-left（左パディング）

すべてのパディングプロパティには、以下の値を設定できます：

• length: px、pt、cm などの単位でパディングを指定します。
• %: 包含要素（親要素）の幅に対するパーセンテージでパディングを指定します。
• inherit: パディングを親要素から継承することを指定します。

注意: パディングに負の値（ネガティブパディング）を使用することはできません。

1.1 個別指定のコード例

以下の例では、<div> 要素の4つのサイドすべてに異なるパディングを設定しています。

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

2. パディング - ショートハンドプロパティ

コードを簡潔にするために、一つの padding プロパティの中にすべてのパディングプロパティを指定することが可能です。これを「ショートハンド（shorthand）」と呼びます。

padding プロパティに指定する値の数によって、適用されるルールが変わります。

2.1 4つの値を指定する場合

padding: 25px 50px 75px 100px; と記述した場合：

• 上パディングは 25px
• 右パディングは 50px
• 下パディングは 75px
• 左パディングは 100px

div {
  padding: 25px 50px 75px 100px; /* 上 右 下 左 の順 */
}

2.2 3つの値を指定する場合

padding: 25px 50px 75px; と記述した場合：

• 上パディングは 25px
• 左右のパディングは 50px
• 下パディングは 75px

div {
  padding: 25px 50px 75px; /* 上 左右 下 */
}

2.3 2つの値を指定する場合

padding: 25px 50px; と記述した場合：

• 上下のパディングは 25px
• 左右のパディングは 50px

div {
  padding: 25px 50px; /* 上下 左右 */
}

2.4 1つの値を指定する場合

padding: 25px; と記述した場合：

• 4つのサイドすべて（上下左右）のパディングが 25px

div {
  padding: 25px; /* 全サイド共通 */
}

3. パディングと要素の幅の関係 (Padding and Element Width)

CSSの width プロパティは、要素のコンテンツ領域の幅を指定するものです。もし要素にパディングがある場合、そのパディングは要素の総幅に追加されます。その結果、意図したよりも要素が広く表示されることがよくあります。

3.1 デフォルトの動作（パディングが幅を拡張する）

以下の例では、<div> 要素の幅を 300px に指定していますが、実際のレンダリング結果としての幅は 350px（300px + 左パディング 25px + 右パディング 25px）になります。

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

3.2 box-sizing プロパティによる解決

パディングを追加しても幅を 300px のまま維持したい場合は、box-sizing プロパティを使用します。これにより、要素は指定した幅（width）を維持し、パディングを増やすとコンテンツ領域がその分縮小されます。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box; /* パディングを含めて 300px に収める */
}

4. すべてのパディングプロパティ一覧