【初心者向け】CSSのmarginとpaddingの違いとは？図解でやさしく解説

1.CSSのmarginとpaddingとは？それぞれの役割を理解しよう
2.marginとpaddingの違いをコードと実例で体感しよう
3.初心者がよくつまずく！marginとpaddingのよくあるミスと対処法
- ❌ よくあるミス1：marginが効かない（実は“相殺”されている）
- ❌ よくあるミス2：paddingをつけたら背景がはみ出る？
4.marginとpaddingの使い分けのコツと実例
5.まとめ｜marginとpaddingの違いを理解してCSSを使いこなそう
- 最後にポイントをおさらい
- 実践のコツ

1.CSSのmarginとpaddingとは？それぞれの役割を理解しよう

CSSを学び始めると必ず出てくるのが、「margin（マージン）」と「padding（パディング）」という2つのプロパティです。どちらも「余白」を調整するために使いますが、意味と使い方がまったく違うため、初心者の多くが混乱しやすいポイントでもあります。

このセクションでは、marginとpaddingの基本的な役割の違いを、初心者の方にもわかりやすく解説していきます。

marginとは？（ボックスの外側の余白）

marginは、要素（ボックス）の外側にできる余白です。
例えば、隣り合うボックス同士にスペースを空けたいときや、要素を上下左右に離したいときに使います。

.box {
  margin: 20px;
}

上記のコードでは、ボックスの外側すべてに20pxのスペースが追加されます。

paddingとは？（ボックスの内側の余白）

一方でpaddingは、要素（ボックス）の内側にできる余白です。
文字や画像などのコンテンツと、ボックスの境界線との距離を広げたいときに使います。

.box {
  padding: 20px;
}

この場合は、ボックスの内側に余白ができ、文字や画像が枠から離れて表示されます。

補足：marginとpaddingの違いをイメージで確認

以下のように、marginはボックスの外、paddingはボックスの内側に余白を作る役割があります。

🟧 margin：一番外側の余白（他の要素とのスペース）

🟦 padding：ボックス内で、テキストなどの「中身」との距離

◼️ content：テキストや画像など、表示される実際の中身

解説

要素	働き
`margin`	外部との距離を作る（要素間のスペース）
`padding`	内部との距離を作る（見やすさ・デザイン調整）
`content`	実際に表示されるテキストや画像

2.marginとpaddingの違いをコードと実例で体感しよう

ここでは、実際のCSSコードを使って、marginとpaddingがどのように表示に影響するかを比較してみましょう。

例1：paddingを使った余白

まずは「内側に余白をつける」paddingの例です。

<div class="box padding-example">こんにちは！</div>

.padding-example {
  background-color: lightblue;
  padding: 20px;
}

こんにちは！

背景色（lightblue）が文字のまわりに広がり、ボックスの中にゆとりができる
中身の「こんにちは！」が四方から20pxだけ離れる

例2：marginを使った余白

次に「外側に余白をつける」marginの例を見てみましょう。

<div class="box margin-example">こんにちは！</div>

.margin-example {
  background-color: lightgreen;
  margin: 20px;
}

こんにちは！

背景色の大きさはそのまま
他の要素と距離を取るための余白が外側にできる

比較ポイントまとめ

条件	padding	margin
余白の位置	内側（ボックスと中身の間）	外側（他の要素との間）
背景の広がり	広がる（背景も内側に伸びる）	変わらない（ボックスサイズのまま）
用途	読みやすく・見やすく整える	要素の配置・レイアウトを調整する

3.初心者がよくつまずく！marginとpaddingのよくあるミスと対処法

CSSで余白を設定しても「思った通りに表示されない…」と悩む初心者は多いです。
このセクションでは、marginとpaddingに関するありがちなミスや勘違いを紹介し、どう対処すればよいかをやさしく解説します。

❌ よくあるミス1：marginが効かない（実は“相殺”されている）

上下のmarginが効いていないように見える場合、実は**マージンの「相殺（margin collapse）」**が起きています。

h1 {
  margin-bottom: 20px;
}

p {
  margin-top: 20px;
}

この2つの要素は、合計40pxではなく20pxしか空きません。なぜなら、上下のmarginが重なって1つにまとめられる仕様だからです。

解決策

相殺させたくない場合は、paddingに変更したり、親要素にoverflow: hiddenを指定することがあります。

❌ よくあるミス2：paddingをつけたら背景がはみ出る？

.box {
  width: 300px;
  padding: 20px;
}

この場合、実際の表示幅は「300 + 左右のpadding分（40）」＝340pxになります。
「幅が大きくなって崩れた…」と感じる原因はこれです。

解決策

box-sizing: border-box; を指定すれば、paddingを含めたサイズ指定が可能になります。

.box {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
}

4.marginとpaddingの使い分けのコツと実例

marginとpaddingの違いを理解しても、**「実際にはどちらを使えばいいの？」**と迷う初心者は多いです。
このセクションでは、現場での使い分けの考え方と、よくあるUIパーツでの実例を紹介します。

基本ルール：外側か内側かで判断！

使う場面	推奨プロパティ
要素と他の要素の間にスペースを作る	`margin`
要素の中のコンテンツにゆとりをもたせる	`padding`

例1：見出しの下にスペースを作る → margin

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

他の要素（段落など）と距離をとるには、外側の余白であるmarginを使います。

例2：ボタンの文字にゆとりを持たせる → padding

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
}

ボタンの見た目の大きさやクリックしやすさは、内側の余白（padding）で調整します。

例3：カード型UIのスペース調整

.card {
  padding: 16px;
  margin: 20px 0;
  background-color: #f8f9fa;
  border-radius: 8px;
}

paddingで中身（テキストや画像）の読みやすさを確保
marginで他のカードとの間隔を調整

応用：両方を組み合わせることも多い！

ほとんどのWebデザインでは、marginとpaddingをセットで使うのが一般的です。

.container {
  padding: 20px;
  margin: 0 auto;
}

このように使い分けることで、見た目とレイアウトを自在にコントロールできます。

5.まとめ｜marginとpaddingの違いを理解してCSSを使いこなそう

この記事では、CSSのmarginとpaddingの違いについて、初心者向けに図解と実例を交えて解説してきました。

最後にポイントをおさらい

用途	プロパティ	内容
要素同士の間隔を作る	`margin`	ボックスの外側に余白を作る
コンテンツにゆとりを与える	`padding`	ボックスの内側に余白を作る
背景に影響がある？	`padding`	背景が広がる（内側に余白があるため）
サイズ調整が必要？	両方	`box-sizing`の設定で挙動を制御できる