WordPress – PHPでのmarginとpaddingとは・・・webサイトのデザインで必要な知識 [2026/04/26]

何れにも余白の値があり，それぞれは，どこを規定にした数値なのか

【結論】
現在日付：2026-04-25 JST

padding と margin の数値は、どちらも自分自身のボックスの辺を基準にした距離です。
ただし、基準にする辺が違います。

margin  → border の外側から、隣の要素・親要素との距離
padding → content の外側から、border の内側までの距離

図にするとこうです。

親要素・周囲の要素
┌──────────────────────────────┐
│ margin                       │ ← border外側から外へ広げる距離
│  ┌────────────────────────┐  │
│  │ border                 │  │ ← 要素の枠線
│  │  ┌──────────────────┐  │  │
│  │  │ padding          │  │  │ ← content外側からborder内側までの距離
│  │  │  ┌────────────┐  │  │  │
│  │  │  │ content    │  │  │  │ ← 文字・画像など
│  │  │  └────────────┘  │  │  │
│  │  └──────────────────┘  │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

【根拠】

例えば以下の場合です。

h2 {
  padding: 10px;
  margin: 20px;
}

これは次の意味です。

padding: 10px
→ H2の文字・内容から、H2の枠線までの内側距離を10pxにするmargin: 20px
→ H2の枠線の外側から、周囲の要素までの外側距離を20pxにする

より正確には、CSSでは要素の箱は以下の順に構成されます。

content box
padding box
border box
margin box

padding は content box と border box の間の距離です。
margin は border box の外側の距離です。

【注意点・例外】

padding や margin に % を使った場合は少し注意が必要です。

h2 {
  padding-left: 10%;
  margin-left: 10%;
}

この 10% は、多くの場合、親要素の横幅を基準に計算されます。
つまり、10px のような絶対値ならそのまま距離ですが、10% は親の幅に対する割合です。

また、em を使う場合は、その要素の文字サイズが基準になります。

h2 {
  padding: 1em;
}

この場合、H2の文字サイズが 24px なら、1em はおおよそ 24px です。

見出しの背景色を広げたいなら padding、見出しと前後の段落の間隔を変えたいなら margin です。

h2 {
  background-color: #eaf8ff;
  padding: 0.4em 0.8em; /* 背景色の内側余白 */
  margin: 1.2em 0 0.6em; /* 前後の要素との距離 */
}

【出典】
CSS Box Model の基本仕様では、要素は content、padding、border、margin の領域で構成されます。

【確実性: 高】

2026/04/26, Mr.Harikiri