CSSを勉強していて、こんな疑問を持ったことはありませんか？
「margin も padding も、どっちも『隙間』を作るやつでしょ？ 何が違うの？」
画面上では同じように見えるこの2つ。実は、役割は「真逆」と言ってもいいほど違います。
これを理解していないと、思い通りのデザインを作ることはできません。
この記事では、絶対に忘れない「額縁（がくぶち）の法則」を使って、この2つの違いを完全攻略します！
一発でわかる！「額縁の法則」
Webサイトの要素（見出しや画像）は、すべて「箱」のような形をしています。
これを部屋に飾る「額縁に入った絵画」だと想像してください。
- Content（内容）： 絵画そのもの（文字や画像）
- Border（境界線）： 額縁のフレーム
- Padding（パディング）： 絵と額縁の間の余白（マット）
- Margin（マージン）： 額縁と、隣の家具との距離
覚え方の合言葉
- Padding = 箱の「内側」の余白（身内）
- Margin = 箱の「外側」の余白（他人との距離）
決定的な3つの違い
「内側か外側か」だけではありません。
実務でデザインする時、以下の3つの違いが重要になってきます。
1. 背景色が「塗られる」か「塗られない」か
これが最大の違いです。
- Paddingエリア： 背景色が塗られます。
- Marginエリア： 背景色は塗られず、透明になります。
「文字の背景に色をつけたいけれど、文字が窮屈だから広げたい」
こんな時は、内側を広げる Padding を使います。
逆に、Margin を使うと、背景色は広がらず、単に箱の周りに透明なバリアが張られるだけになります。
2. クリックできる範囲が変わる
リンクやボタンを作る時に超重要です。
- Paddingエリア： クリックできます。
- Marginエリア： クリックできません。
「スマホでボタンが小さくて押しにくい！」という時は、MarginではなくPaddingを増やして、ボタンの「当たり判定」を大きくしてあげるのが正解です。
3. 要素の大きさへの影響
通常の設定では、Paddingを増やすと箱自体が太って大きくなります。
逆にMarginは、箱の大きさは変えず、周りのスペースだけを押し広げます。
実際のコードで比較してみよう
論より証拠。実際のコードと見た目の違いを見てみましょう。
どちらも「隙間を20px空ける」という指定ですが、結果は全く違います。
<style>
.box {
background-color: #ffcc80; /* オレンジ色の背景 */
border: 2px solid red; /* 赤い枠線 */
display: inline-block;
}
/* パターンA：Paddingを使用 */
.padding-box {
padding: 20px;
}
/* パターンB：Marginを使用 */
.margin-box {
margin: 20px;
}
</style>
<!-- パターンA -->
<div class="box padding-box">Paddingで広げた箱</div>
<!-- パターンB -->
<div class="box margin-box">Marginで広げた箱</div>【結果】
- Paddingの箱： オレンジ色の背景が広がり、枠線も外側に広がります。文字の周りにゆとりが生まれます。
- Marginの箱： 箱の大きさはギリギリのまま。その代わり、箱の「外側」に透明なスペースができるので、隣の要素と離れます。
使い分けのチェックリスト
「どっちを使えばいいんだっけ？」と迷ったら、以下のリストを確認してください。
Padding（内側）を使うとき
- ✅ 背景色や枠線の内側を広げたいとき
- ✅ ボタンを大きくして押しやすくしたいとき
- ✅ 枠線と文字が近すぎて読みづらいとき
Margin（外側）を使うとき
- ✅ 隣の要素との距離を離したいとき（段落の間など）
- ✅ 要素を画面の中央に寄せたいとき（
margin: 0 auto;） - ✅ 完全に透明なスペースを作りたいとき
まとめ
CSSのレイアウトで迷ったら、まずは「Border（境界線）」を意識してみてください。
境界線の中（Padding）で太らせるのか。
境界線の外（Margin）で距離をとるのか。
この感覚が掴めると、デザインのズレを一瞬で直せるようになりますよ！