【CSS基礎】marginとpaddingの違いとは？width・borderを含めたボックスモデルを使いで解説

「要素の外側に余白を作りたいのに、なぜか内側が広がってしまう……」
「marginとpadding、どちらを使えばいいのかいつも迷う」
「指定したwidth（幅）よりも、実際の表示が大きくなってしまうのはなぜ？」

CSSでレイアウトを組み始めると、誰もが一度は「余白」の扱いに頭を悩ませます。この問題を解決する鍵となるのが、「ボックスモデル」という考え方です。

Webサイト上のすべての要素（見出し、段落、画像など）は、実は目に見えない「四角い箱（ボックス）」の中に収まっています。この箱の構造を正しく理解すれば、自由自在に要素の間隔をコントロールできるようになります。

本記事では、初心者の方が最も混同しやすい margin と padding の決定的な違いから、サイズ計算の落とし穴、そして現代のWeb制作に欠かせない box-sizing の設定まで、分かりやすく解説します。

全ての基本「ボックスモデル」の正体
1. 1-1. ボックスを構成する4つの要素
2. 1-2. なぜこの構造を知る必要があるのか？
padding（内側の余白）の使い方と特徴
1. 2-1. 背景色が適用される領域
2. 2-2. paddingの書き方（ショートハンド）
margin（外側の余白）の使い方と特徴
width（幅）計算の落とし穴：実際のサイズはどう決まる？
1. デフォルトのサイズ計算式
2. 解決策：box-sizing: border-box
marginとpadding、どっちを使うべき？迷った時のチェックリスト
実践：ボックスモデルを意識したカードデザイン
まとめ：余白を制する者はCSSを制す

全ての基本「ボックスモデル」の正体

Webページ上の要素は、中心にある「コンテンツ」を3つの層が囲む構造になっています。これをボックスモデルと呼びます。

1-1. ボックスを構成する4つの要素

内側から順に、以下の4つのパーツで構成されています。

コンテンツ（Content）：テキストや画像そのものが入る領域。
パディング（Padding）：コンテンツと境界線（Border）の間の「内側の余白」。
ボーダー（Border）：要素を囲む「境界線」。
マージン（Margin）：ボーダーの外側にある、隣の要素との「外側の余白」。

1-2. なぜこの構造を知る必要があるのか？

例えば、ボタンを作るときに「文字と枠線の距離」を広げたいなら padding を使い、「ボタンとボタンの距離」を広げたいなら margin を使います。この使い分けができないと、背景色の範囲がおかしくなったり、レイアウトが崩れたりする原因になります。

padding（内側の余白）の使い方と特徴

padding は、要素の「中身」を広げるための余白です。

2-1. 背景色が適用される領域

ここが最大のポイントです。要素に background-color（背景色）を指定している場合、paddingの領域にも背景色が付きます。 「文字の周りに色付きの余白を作りたい」という場合は、必ず padding を使用します。

2-2. paddingの書き方（ショートハンド）

上下左右を個別に指定することも、まとめて指定することも可能です。

/* 4方向バラバラに指定 */
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;

/* まとめて指定（ショートハンド） */
padding: 20px 15px; /* 上下20px、左右15px */
padding: 10px 20px 30px 40px; /* 上・右・下・左の時計回り */

margin（外側の余白）の使い方と特徴

margin は、その要素と「外の世界」との距離を保つための余白です。

3-1. 背景色は適用されない

margin はボーダーの外側の空間なので、要素に設定した背景色はここには反映されません。常に「透明な空間」として扱われます。

3-2. 要素を中央に寄せる「margin: auto」

ブロック要素（div など）を画面の真ん中に配置したいとき、実務で非常によく使われるテクニックです。

.container {
  width: 80%;
  margin: 0 auto; /* 上下は0、左右は自動（中央寄せ） */
}

【注意】マージンの相殺

初心者が最も驚く現象の一つです。上下に並んだ要素にそれぞれ margin を設定した場合、余白は「足し算」されず、「大きい方の数値」が優先されます。（※左右の余白では起こりません）

width（幅）計算の落とし穴：実際のサイズはどう決まる？

「widthを300pxに指定したのに、実際にはもっと大きく表示される……」
これは、CSSのデフォルト設定ではwidthの中にpaddingやborderが含まれていないからです。

デフォルトのサイズ計算式

標準的な設定（content-box）では、要素の本当の横幅は以下のように計算されます。

実際の幅 = width + 左右padding + 左右border

（例）width: 300px, padding: 20px, border: 5px の場合
実際の表示値は350pxになってしまいます。これが原因で、横並びにしたい要素が入り切らずに下に落ちてしまう（レイアウト崩れ）が多発します。

解決策：box-sizing: border-box

現代のWeb制作では、この計算の狂いを防ぐために、box-sizing: border-box; を指定するのが常識です。これを使うと、 width の数値の中にpaddingとborderが収まるようになります。

/* 全ての要素に適用するのが一般的 */
* {
  box-sizing: border-box;
}

この一行をCSSの冒頭（リセットCSS）に入れるだけで、サイズ計算のストレスから解放されます。

marginとpadding、どっちを使うべき？迷った時のチェックリスト

迷った時は、以下の3つの基準で判断しましょう。

判断基準	padding（内側）	margin（外側）
背景色を付けたいか？	付ける	付けない（透明）
クリック範囲に含めたいか？	含める	含めない
枠線の外か内か？	枠線の内側	枠線の外側

例えば、スマホサイトのボタン。押しやすくするために余白を作りたい場合は、クリックできる範囲が広がる padding を使うのが正解です。

実践：ボックスモデルを意識したカードデザイン

これまでの知識を組み合わせて、ブログの「記事カード」のようなパーツを作ってみましょう。

HTML：

<div class="card">
  <h2>CSS学習のコツ</h2>
  <p>ボックスモデルを理解すれば、レイアウトは怖くありません。</p>
</div>

CSS：

.card {
  box-sizing: border-box;
  width: 300px;
  background-color: #f9f9f9;
  border: 2px solid #333;
  
  /* 内側に余裕を持たせる（背景色が乗る） */
  padding: 20px;
  
  /* カード同士の距離を空ける（透明な空間） */
  margin: 20px;
}

.card h2 {
  /* 見出しの下だけに少し余白を作る */
  margin-bottom: 10px;
  color: #007bff;
}