「padding と margin、どっちを使えばいいの？」
そんなふうに悩んで、手が止まったり、また検索してしまったり。
私もWeb制作を始めたばかりの頃は、何度もそこでつまずいていました。
同じように感じたことがある方、きっと少なくないはずです。
見た目は少し似ていても、実はそれぞれの役割がまったく違います。
でも、その違いをちゃんと理解できれば、自信を持って使い分けられるようになります。
この記事では、初心者の方にもわかりやすく、padding と margin の違いや使い方を丁寧に解説します。
paddingは内側の余白、marginは外側の余白
Webページでは、何も指定しないとHTML要素は上や左に詰まって配置されます。
そこで必要になるのがpaddingとmarginという「余白」の調整です。
- padding（内側の余白）は、文字や画像とボックスの枠との間にスペースを作ります。
→ 文字が枠にくっつかないようにしたいときなどに使います。 - margin（外側の余白）は、ボックス同士の間隔をあけるために使います。
→ 他の要素との距離や配置を調整したいときに使います。
この2つの違いを、下の図にまとめました。
要素の内側（テキストと枠の間）
with:100px;を指定しています。
※box-sizing: border-box;を指定しているので、withにpaddingやborderが含まっています。
要素の外側（他の要素との間）
with:100px;を指定しています。
margin:20px;を指定しています。
この記事では、図の色分けで、余白の違いをわかりやすくしています。
薄い緑＝padding（内側の余白）
薄いオレンジ＝margin（外側の余白）
薄い青＝要素
paddingとmarginの書き方
個別指定
上だけ、右だけ、下だけ、左だけと、一部の方向だけ余白を設定したい場合に使います。
| プロパティ | 対応する方向 |
|---|---|
| padding-top / margin-top | 上（top） |
| padding-right / margin-right | 右（right） |
| padding-bottom / margin-bottom | 下（bottom） |
| padding-left / margin-left | 左（left） |
ショートハンドで指定
余白を上下左右それぞれに設定するために、padding-top、padding-right、padding-bottom、padding-left と毎回書くのは、面倒です。
そんなときに便利なのが、paddingや margin のショートハンドです。
一度にまとめて指定できるので、作業がスムーズになります。
順番はこうだよ！
「上・右・下・左」（＝時計回り）
レイアウト調整の基本｜paddingを使うシーン
ボタンの中のテキスト
テキストにpaddingを加えることで、視認性が高まり、操作しやすくなります。
背景色を目立たせたい・広く見せたいとき
paddingで内側に余白をつけることで、背景色の範囲を視覚的に広く見せることができます。
カード全体に余白
カード内のテキストや画像の端がくっついていると、見た目が窮屈に感じます。
そんなときに使えるのがpadding（内側の余白）です。
カードにゆとりを持たせることで、見やすくキレイに整います。
レイアウト調整の基本｜marginを使うシーン
セクションごとの間隔をあけたいとき
複数のセクションを並べる場合、それぞれの間に適度なスペースをとることで、ページ全体が見やすく整理された印象になります。
そのためには、各セクションにmarginを設定して、外側の余白を作るのが効果的です。
要素を中央寄せしたいとき
左寄せ
特に指定しなくても、ブロック要素は左寄せになります。
中央寄せ
要素を横方向の中央に揃えたいときは、margin: 0 auto; が便利です。
この設定では、上下には余白がなく、左右は自動調整されて中央揃えになります。
ただし、要素に幅（with）の指定が必要です。
中の文字も中央にしたい場合は text-align: center; を追加します。
右寄せ
margin-left: auto;
margin-right: 0;
指定すれば、要素を右寄せすることができます。
中央寄せ複数のカードの間に marginを使う
カード同士の間隔が狭いと、視認性が下がり、読みにくく感じられることがあります。
そんなときは、marginを使ってカード同士の間に余白を入れてみましょう。
たったこれだけで、見た目の印象が大きく変わります。
box-sizingを使ってデザインを整える
要素の「幅（width）」や「高さ（height）」に、padding や boder を含めるかどうかを決めるのが box-sizing です。
レイアウトがうまく揃わないときは、box-sizing:boder-box; に変更してみると、解決するかもしれません。
| box-sizing の種類 | 幅（width）の扱い | 実際の表示サイズの計算例（width: 200px; padding: 20px; border: 5px;の場合） |
| content-box（初期値） | 幅は「中身（content）」のみ | 200（中身） + 20×2（padding左右） + 5×2（border左右） = 250px |
| border-box | 幅に「paddingとborderも含める」 | 全体で200px → paddingとborder分を引いた分だけ中身は狭くなる |
box-sizing:boder-box;を設定しておけば、レイアウトが崩れにくくなるよ！
marginの相殺
marginをつけたのに反映されない経験が、コーディング中にあるかもしれません。
実は上下のmarginは重なり合うと、大きい方のみが適用され、小さい方は無効化されます。
相殺が起こらないケース
相殺が原則として起こる margin ですが、例外的に発生しないケースもあります。
ポイントを順に確認していきましょう。
❶インライン要素では margin の相殺が起きない
→ 相殺はブロック要素の上下方向に対してのみ起きるため、インライン要素間では適用されません。
❷padding や boder が間にあるとき
2つの marginの間に padding や boder があると、相殺は起こらず、それぞれの余白が合計されて適用されます。
❸親または子要素が flex・ grid の場合
→ flex や gridの子要素同士では、margin の相殺は起きません。上下の marginはそのまま合算されます。
❹ネガティブマージン
→ 負の margin同士では通常の相殺と異なり、合算される方向に作用します。正の marginとの組み合わせでは減算的な相殺になります。
❺親要素に overflowがかかっている場合
→ 親にoverflow:hidden;があると、相殺は起きません。
ネガティブマージン
marginに マイナスの値（例：-20px）を指定することで、要素の距離を縮めたり、重ねたりできます。
・ネガティブマージンを多用すると、どの要素に影響しているのか分かりにくくなり、レイアウトのトラブルの原因になります。
・まずは、通常の margin や padding で解決できるか確認してから使うのが適切です。
インライン要素の余白について
HTMLの要素は大きく「ブロック要素」と「インライン要素」に分かれています。
ブロック要素とインライン要素のおさらい
ブロック要素は、div、p、h1、などで、幅いっぱいに表示され、上下に余白ができる。
インライン要素は、aタグ、spanタグ、などで、テキストの流れの中に並び、改行されない。
インライン要素には注意が必要です。余白の調整がちょっと特別です。
aタグ や spanタグ などのインライン要素には、padding や margin を指定したときの挙動に特有のルールがあります。
ブロック要素と同じつもりで余白を設定すると、思った通りに表示されません。
インライン要素における padding・margin の特徴
margin（外側の余白）
→ 左右には適用されます。
→ 上下には適用されません（スペースができない）。
padding（内側の余白）
→ 左右には通常通り適用されます。
→ 上下にも広がりますが、レイアウトや機能に干渉しない。
インライン要素に background-color を指定すると、上下方向の padding が適用されているのが見た目でわかります。実際に余白部分に色がつき、見かけ上は広がっているのです。
ただし、要素の上下に余白が広がっていても、他の要素との距離（外側のスペース）は変わりません。
そのため、例えば画像との距離が変わらないなど、余白を設定したのに、「思ったようにスペースができない」という現象が起こります。
インライン要素に上下の余白をつけたいとき
aタグやspanタグ は使用頻度が高いため、上下方向にも余白をつけたい場面がよくあります。そんなときは、display:inline-block; を指定しましょう。
これにより、インライン要素でありながらブロック要素のように上下の padding や margin を適用できるようになります。
paddingとmarginの違いを理解して、迷わず使い分けよう
Web制作では、要素同士の見た目を整えるために「余白」の調整が欠かせません。
余白には2種類あり、paddingは要素の内側の余白、marginは外側の余白を作るために使います。
- padding：ボタンやカード内の文字と枠の間にスペースを作る
- margin：セクションの間隔や中央寄せなど、要素同士の距離を調整する
また、余白は方向ごとに個別指定もできますが、ショートハンド記法を使えば効率的にまとめて書けます。
さらに、正確なレイアウト調整には、
- box-sizing:boder-box; の理解
- marginの相殺（上下のmarginが重なって1つ分になる現象）
- ネガティブマージン（要素同士を縮める）
- インライン要素の扱い（上下のmarginは効かない）
といった知識も大切です。
paddingとmarginを正しく使い分けることで、見やすく整ったデザインが作れるようになります。
最後までご覧いただき、ありがとうございました。