【初心者向け】CSS paddingの使い方を分かりやすく解説！サンプルコード付き

paddingとmarginは混同されがちですが、marginは要素と他の要素間のスペースを調整するものであり、paddingは要素内のスペースを調整するものです。

paddingの値は、ピクセル（px）、パーセンテージ（%）、emなどの単位で指定できます。

paddingの指定方法

paddingは、以下の3つの方法で指定できます。

すべての方向に同じ値を指定する

selector {
  padding: 10px; /* 上下左右すべてに10pxのpaddingを設定 */
}

上下左右の方向に個別に値を指定する

selector {
  padding: 10px 20px 30px 40px; /* 上: 10px、右: 20px、下: 30px、左: 40pxのpaddingを設定 */
}

selector {
  padding: 10px 20px; /* 上下に10px、左右に20pxのpaddingを設定 */
}

paddingの注意点

borderが設定されている場合、paddingはborderの内側に適用されます。
paddingは、inline要素には垂直方向にのみ効果があります。inline要素にpaddingを設定しても、その要素自体には影響せず、他のinline要素をプッシュするだけです。
paddingは、要素の幅と高さに影響を与えます。要素にwidthとheightが設定されている場合、paddingの値はその値に加算されます。

paddingの例

以下の例では、#container要素にpaddingを設定して、要素内のコンテンツと境界線の間にスペースを作ります。

#container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
}

この例では、#container要素は300pxの幅と200pxの高さを持つ矩形になります。要素には1pxのグレーの境界線と、20pxのpaddingが設定されています。

例1：要素全体にpaddingを設定する

この例では、#container要素に20pxのpaddingを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>padding 例1</title>
  <style>
    #container {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="container">
    コンテンツ
  </div>
</body>
</html>

このコードを実行すると、以下のようになります。

[イメージ]

要素には1pxのグレーの境界線と、20pxの余白が表示されます。コンテンツはpaddingによって境界線から20px離れています。

この例では、#container要素に上下左右に個別にpaddingを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>padding 例2</title>
  <style>
    #container {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 10px 20px 30px 40px;
    }
  </style>
</head>
<body>
  <div id="container">
    コンテンツ
  </div>
</body>
</html>

要素には1pxのグレーの境界線と、上下左右に個別に設定されたpaddingが表示されます。コンテンツは上に10px、右に20px、下に30px、左に40px離れています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>padding 例3</title>
  <style>
    #container {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 20px 50px; /* 上下に20px、左右に50pxのpaddingを設定 */
    }
  </style>
</head>
<body>
  <div id="container">
    コンテンツ
  </div>
</body>
</html>

要素には1pxのグレーの境界線と、上下に20px、左右に50pxのpaddingが表示されます。コンテンツは上と下に20px、左右に50px離れています。

marginプロパティを使用する

marginプロパティは、要素と他の要素間のスペースを調整するために使用されます。paddingと同様に、marginもピクセル、パーセンテージ、emなどの単位で指定できます。

paddingの代わりにmarginを使用する利点は、以下の通りです。

要素を中央揃えや右揃えにすることができる
要素を他の要素から離すことができる
要素の幅と高さを変更しない

marginの欠点は、以下の通りです。

要素同士が重なる可能性がある
要素の内容領域内にスペースを追加しない

例

#element {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px; /* 上下左右に20pxのmarginを設定 */
}

この例では、#element要素は300pxの幅と200pxの高さを持つ矩形になります。要素には1pxのグレーの境界線と、上下左右に20pxのmarginが設定されています。paddingを使用した場合とは異なり、要素の幅と高さは20px増加しません。

borderプロパティを使用する

borderプロパティは、要素の境界線を作成するために使用されます。borderの幅を調整することで、要素のコンテンツ領域と境界線の間のスペースを間接的に調整することができます。

borderの代わりにpaddingを使用する利点は、以下の通りです。

要素の外観を装飾することができる

borderの欠点は、以下の通りです。

paddingと比べて非効率である可能性がある
要素の内容領域内にスペースを追加しない

例

#element {
  width: 300px;
  height: 200px;
  border: 20px solid #ccc;
}

この例では、#element要素は300pxの幅と200pxの高さを持つ矩形になります。要素には20pxのグレーの境界線が設定されています。paddingを使用した場合とは異なり、要素の内容領域は20px狭くなります。

box-sizingプロパティを使用する

box-sizingプロパティは、要素の幅と高さをどのように計算するかを決定するために使用されます。box-sizingをborder-boxに設定すると、要素の幅と高さにpaddingとborderの幅が含まれます。

box-sizingをborder-boxに設定する利点は、以下の通りです。

paddingとborderの幅を考慮したレイアウトを作成することができる

box-sizingをborder-boxに設定する欠点は、以下の通りです。

古いブラウザではサポートされていない可能性がある

例

#element {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
}

この例では、#element要素は340pxの幅と220pxの高さを持つ矩形になります。要素には1pxのグレーの境界線と、20pxのpaddingが設定されています。box-sizingがborder-boxに設定されているため、要素の幅と高さにはpaddingの幅が含まれています。

flexboxレイアウトを使用する

flexboxレイアウトは、要素を柔軟にレイアウトするためのCSSレイアウトモジュールです。flexboxレイアウトを使用して、要素のコンテンツ領域と境界線の間のスペースを直接調整することができます。

flexboxレイアウトの利点は、以下の通りです。

要素を**