Webデザインを学び始めた人が最初につまずきやすいポイントの一つに、CSSの「margin（マージン）」と「padding（パディング）」があります。どちらも「余白」に関係しているため、混同しやすいですが、役割は大きく異なります。この記事では、marginとpaddingの違いをわかりやすく解説し、それぞれの使い方を実例付きで紹介していきます。基本を押さえることで、よりきれいで意図通りのレイアウトを組めるようになりますので、ぜひ最後まで読んでください！

marginとは？基本の意味と役割

marginとは、要素の外側に作る「外側の余白」のことを指します。例えば、複数のボックスが並んでいる場合、それぞれの間隔をあけるために使うのがmarginです。
要素と要素の「間」にできる空白と覚えておきましょう。

.box {
  margin: 20px;
}

上記のように指定すると、四方（上・右・下・左）すべてに20px分の外側の余白ができます。これにより、隣接する要素との距離が生まれ、見た目が整います。

paddingとは？基本の意味と役割

paddingとは、要素の内側に作る「内側の余白」のことです。要素の中にあるコンテンツ（テキストや画像）と、ボックスの境界線（border）との間にスペースを作りたいときに使います。

.box {
  padding: 20px;
}

このように設定すると、ボックスの内側に20pxの余白ができ、文字や画像がボーダーから離れ、見やすくなります。

marginとpaddingの違いを図でイメージしよう

marginとpaddingの違いを一言でまとめると、

• margin＝外側の余白
• padding＝内側の余白
  です。

イメージとしては以下のようになります。

[ margin ] [ border ] [ padding ] Content [ padding ] [ border ] [ margin ]

つまり、marginは「外」、paddingは「中」にできるスペースです。この構造を理解しておくと、レイアウト崩れの原因を特定しやすくなります。

marginとpaddingの指定方法

marginもpaddingも、個別に方向を指定することができます。

四方向一括指定

.box {
  margin: 10px;
  padding: 10px;
}

すべての方向（上・右・下・左）に同じ値を指定します。

上下左右を個別に指定

.box {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-left: 5px;

  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 15px;
  padding-left: 5px;
}

それぞれの方向に別々の値を設定できます。

ショートハンド（短縮記法）

一括でまとめて指定する書き方もあります。

.box {
  margin: 10px 20px 30px 40px; /* 上 右 下 左 の順番 */
  padding: 5px 15px; /* 上下 右左 */
}

• 1値→四方すべて同じ
• 2値→上下・左右
• 3値→上・左右・下
• 4値→上・右・下・左

というルールで展開されます。

marginとpaddingを使ったレイアウト例

ここでは、実際にmarginとpaddingを使った簡単なレイアウト例を見てみましょう。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

.container {
  background-color: lightgray;
  padding: 20px;
}

.box {
  background-color: white;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}

この例では、

• containerにpaddingを付けて、コンテンツ全体に余白を作り
• 各boxにmargin-bottomを付けて、ボックス同士にスペースを作っています。

結果として、見た目が整った読みやすいレイアウトになります。

marginの「相殺」現象とは？

CSSでは、隣り合う要素同士のmarginが合わさってしまう「マージン相殺（margin collapsing）」が起こる場合があります。

例えば、親要素と子要素にそれぞれmargin-topが指定されていると、通常はそれぞれ適用されそうですが、実際は大きい方のみが適用されます。

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  margin-top: 20px;
}

.child {
  margin-top: 30px;
}

この場合、20px＋30px＝50pxにはならず、30pxだけ空きます。

マージン相殺を防ぎたい場合は、親要素にpaddingやborderを付けると良いです。

よくあるミスと注意点

marginとpaddingを使う上で、初心者がよくやってしまうミスを紹介します。

• paddingに頼りすぎて、意図しないレイアウト崩れが起きる
• marginを調整しても思った位置に動かない（隣の要素も動かす必要がある）
• ボックスのサイズ（width・height）にpaddingを含めるつもりなのに設定していない

特に最後のポイントは、box-sizing: border-box;を使うと解決できます。

* {
  box-sizing: border-box;
}

これを設定しておくと、widthやheightにpaddingやborderのサイズが含まれるので、レイアウト計算が簡単になります。

実務で使い分けるコツ

実際にWebサイトを作るときには、以下のように使い分けるとスムーズです。

• 要素同士の間隔を空けたいとき → margin
• 要素内のコンテンツにスペースを持たせたいとき → padding

たとえば、見出しと本文の間隔はmargin、ボタン内の文字とボーダーの間隔はpaddingを使う、という具合です。

また、レスポンシブデザイン（スマホ対応）をする際も、marginとpaddingを適切に使い分けることで、バランスの良いデザインになります。

---

まとめ

CSSのmarginとpaddingは、Webデザインに欠かせない重要な概念です。
一見似ているようで、

• marginは外側の余白
• paddingは内側の余白
  という違いがあります。

この基本をしっかり押さえておくことで、レイアウト崩れを防ぎ、より洗練されたページを作れるようになります。
まずは小さなサンプルからmarginとpaddingの使い方を試して、感覚を身につけていきましょう！