CSS padding

paddingは、要素のコンテンツとその境界線の間のスペースです。要素内のコンテンツと境界線の間に適用されるので、要素内に空白を作成する効果があります。

padding プロパティ
個別のパディングプロパティ
パディングの単位
ボックスサイズに影響するパディング
1. content-box（デフォルト）
2. border-box

padding プロパティ

CSSの padding プロパティを使用して、要素のパディングを設定できます。paddingは、上下左右の4つの方向に設定できます。

/* 上下左右すべてに同じパディングを適用 */
padding: 10px;

/* 上下には 10px、左右には 20px のパディングを適用 */
padding: 10px 20px;

/* 上には 10px、左右には 20px、下には 30px のパディングを適用 */
padding: 10px 20px 30px;

/* 上には 10px、右には 20px、下には 30px、左には 40px のパディングを適用 */
padding: 10px 20px 30px 40px;

個別のパディングプロパティ

個別の方向にパディングを設定するには、次のプロパティを使用します。

padding-top: 10px;    /* 上のパディング */
padding-right: 20px;  /* 右のパディング */
padding-bottom: 30px; /* 下のパディング */
padding-left: 40px;   /* 左のパディング */

パディングの単位

パディングの値には、さまざまな単位が使用できます。代表的な単位は以下の通りです。

px（ピクセル）：絶対単位で、画面上のピクセル数を指定します。
%（パーセント）：相対単位で、親要素の幅に対するパーセンテージを指定します。
em：相対単位で、要素のフォントサイズに対する倍率を指定します。
rem：相対単位で、ルート要素（<html>）のフォントサイズに対する倍率を指定します。

ボックスサイズに影響するパディング

パディングは、要素のボックスサイズに影響を与えます。

content-box（デフォルト）

box-sizing プロパティが content-box（デフォルト）に設定されている場合、パディングは要素の全体的なサイズに追加されます。これは、パディングが要素の幅と高さに加算されることを意味します。

div {
  width: 300px;
  height: 100px;
  padding: 20px;
  box-sizing: content-box;
}

上記の例では、要素の実際の幅は 340px（300px + 20px左パディング + 20px右パディング）で、高さは 140px（100px + 20px上パディング + 20px下パディング）になります。

border-box

一方、box-sizing プロパティが border-box に設定されている場合、パディングは要素の指定された幅と高さに含まれます。これは、パディングが要素の幅と高さから引かれることを意味します。

div {
  width: 300px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
}

上記の例では、要素の実際の幅は 300px（指定された幅）で、高さは 100px（指定された高さ）です。

ただし、コンテンツ領域の幅は 260px（300px – 20px左パディング – 20px右パディング）で、高さは 60px（100px – 20px上パディング – 20px下パディング）となります。