CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ
CSSで余白を調整するときに必ず登場するのが、margin と padding です。
どちらも「余白」を作るプロパティですが、役割や挙動はかなり異なります。ここをあいまいなままにしておくと、レイアウト崩れや意図しない見た目につながりやすくなります。
本記事では、margin と padding の違いをボックスモデルの基礎から整理し、よく使うレイアウトパターンでの使い分けや、つまずきやすいポイントまでまとめて解説します。
Contents
1. margin と padding を理解する前に：ボックスモデルの基礎
HTML要素は、CSSの「ボックスモデル」で表現されます。
+---------------------------+
| margin（外側） |
| +---------------------+ |
| | border（枠線） | |
| | +-----------------+ | |
| | | padding（内側） | | |
| | | +-------------+ | | |
| | | | content | | | |
| | | +-------------+ | | |
| | +-----------------+ | |
| +---------------------+ |
+---------------------------+- content … 文字や画像など中身そのもの
- padding … content と枠線のあいだの「内側の余白」
- border … 要素の境界となる枠線
- margin … 要素の外側にできる「他の要素とのすき間」
ボックスモデルの詳しいサイズ計算や px / rem などの単位は、「CSSでサイズ指定を理解する｜px・em・remの違い」で整理しておくと、margin / padding の理解にも役立ちます。
2. margin と padding の定義
2-1. margin（マージン）とは
margin は「要素の外側」に作る余白です。
.box {
margin: 16px;
}この場合、.box の周りに 16px のすき間が追加され、隣の要素や親要素との距離が広がります。
ポイント
- 背景色や枠線の「外側」にできる余白
- クリック判定・タップ領域には含まれない
- 隣接するブロック要素どうしで「marginの相殺（margin collapsing）」が起こる
2-2. padding（パディング）とは
padding は「要素の内側」に作る余白です。
.box {
padding: 16px;
}この場合、content の周りに 16px の余白ができ、背景色や枠線は padding 部分まで含めて塗りつぶされます。
ポイント
- 背景色や枠線の「内側」にできる余白
- クリック判定・タップ領域に含まれる
- padding を増やすと、通常は要素の見かけのサイズも大きくなる（
box-sizingによる）
3. margin と padding の違いを徹底比較
3-1. どこに余白ができるか
| 項目 | margin | padding |
|---|---|---|
| 余白の位置 | 要素の外側 | 要素の内側 |
| 背景色の適用範囲 | 背景色は適用されない | 背景色が塗られる |
| クリック / タップ | 領域に含まれない | 領域に含まれる |
| 隣接要素との関係 | 要素どうしの距離を調整する | 中身と枠の距離を調整する |
3-2. 背景色・枠線との関係
.box {
background: #f0f8ff;
border: 1px solid #ccc;
margin: 16px;
padding: 16px;
}margin… 水色背景の 外側 のすき間。ページ背景が見えるpadding… 水色背景の 内側 のすき間。文字と枠線の間隔
カードデザインやボタンなど、背景とテキストの余白をきれいに見せたい場合は、基本的に padding を使って調整します。
3-3. クリック・タップ範囲への影響
ボタンやリンクで違いが分かりやすくなります。
.btn {
display: inline-block;
background: #007acc;
color: #fff;
padding: 8px 16px; /* クリックできる領域が広がる */
margin: 16px; /* ボタン自体の位置が離れるだけ */
}padding… ボタンのクリック範囲を広げるmargin… ボタンと他の要素とのすき間を広げる
アクセシビリティや操作性を考える場合、ボタンやリンクの当たり判定を広げるのは padding で行うのが基本です。
3-4. レイアウトへの影響（marginの相殺など）
ブロック要素どうしで上下に margin を指定すると、「margin の相殺（margin collapsing）」が発生します。
h2 {
margin-bottom: 24px;
}
p {
margin-top: 16px;
}この場合、h2 と p の間の余白は 24px と 16px の 大きい方 24px だけになります。両方が足し算されて 40px にはなりません。
セクション間の余白を margin で管理するときは、この挙動を理解しておくと、意図したスペースが作りやすくなります。ブラウザごとの初期スタイルの違いが気になる場合は、「CSSリセットの基本｜ブラウザ差異をなくす方法」で解説されているようなリセットCSSの活用も有効です。
3-5. box-sizing との関係
デフォルトの box-sizing は content-box です。
.box {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
}この場合、実際の見かけの幅は
- 300px（content） + 16px × 2（左右padding） + 1px × 2（左右border）
= 334px
となります。これが分かりにくい場合は、次のような指定で「枠の外側のサイズ」を一定にすることがよく行われます。
*,
*::before,
*::after {
box-sizing: border-box;
}border-box では width に padding / border を含めて計算されるため、レイアウトが組みやすくなります。サイズ指定の考え方は「CSSでサイズ指定を理解する｜px・em・remの違い」と合わせて整理しておくと理解しやすくなります。
4. margin と padding の基本的な使い分けルール
4-1. 原則
- 要素同士の距離を調整したいとき …
margin
例：セクションとセクションの間、カード同士の間隔など - 要素の中身と枠の距離を調整したいとき …
padding
例：見出しの上下の余白、ボタンの内側の余白、カード内のテキストまわりなど
この原則を軸にしておくと、スタイルガイドやBEMなどの設計とも相性が良くなります。
4-2. よくある UI コンポーネントでの使い分け
例1：セクション見出し
.section {
margin-top: 80px;
}
.section__title {
padding-bottom: 8px;
border-bottom: 2px solid #007acc;
}.section… セクション全体の上部余白をmarginで調整.section__title… 見出しテキストと下線の距離をpadding-bottomで調整
例2：カードレイアウト
.card-list {
display: flex;
gap: 24px; /* カード同士の間隔（最近は gap を使う） */
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,.05);
padding: 16px; /* カードの内側の余白 */
}カード同士の間隔は margin でも作れますが、Flexbox や Grid を使う場合は gap の方が管理しやすいケースが増えています。レイアウト全体やメディアクエリの使い方は「CSSでメディアクエリを使う方法」と合わせて整理しておくと便利です。
例3：ボタン
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #007acc;
color: #fff;
}
.btn + .btn {
margin-left: 8px; /* ボタン同士の間隔のみ margin で調整 */
}ボタン自身の大きさ・クリック範囲は padding で決め、ボタン同士の距離だけ margin-left で調整すると、スタイルが整理されます。
5. 実務で使いやすい余白パターン
5-1. セクション間の余白設計
ページ全体で余白のリズムを整えるため、セクション間の margin をルール化しておく方法がよく使われます。
.section {
margin-top: 80px;
}
.section:first-of-type {
margin-top: 40px;
}- ページの上部は少し狭め（40px）
- 以降のセクションは一定間隔（80px）
といったように、余白サイズを数パターンに絞るとデザインが整いやすくなります。
5-2. テキストブロックの余白
.article p + p {
margin-top: 1.5em;
}段落同士の余白は margin-top を使うことが多く、em 単位を使うことで文字サイズに応じて自然な間隔になります。単位の詳しい違いは「CSSでサイズ指定を理解する｜px・em・remの違い」で整理されています。
5-3. フォームの余白
.form-item {
margin-bottom: 24px;
}
.form-item__label {
display: block;
margin-bottom: 8px;
}
.form-item__input {
width: 100%;
padding: 8px 12px;
}.form-item… 項目同士のすき間 →margin-bottom.form-item__label… ラベルと入力欄の距離 →margin-bottom.form-item__input… 入力欄内の余白 →padding
入力欄内の文字と枠の距離を padding でとることで、可読性が上がります。
6. margin / padding の指定方法
6-1. 基本の指定
.box {
margin-top: 16px; /* 上だけ */
margin-right: 8px; /* 右だけ */
margin-bottom: 16px; /* 下だけ */
margin-left: 8px; /* 左だけ */
}padding も同じ書き方です。
6-2. 一括指定（ショートハンド）
/* 上右下左 */
margin: 10px 20px 30px 40px;
/* 上下 | 左右 */
margin: 10px 20px;
/* 上 | 左右 | 下 */
margin: 10px 20px 30px;padding もまったく同じルールで指定できます。
6-3. 論理プロパティ（縦書き対応など）
最近は、レイアウトの向きに依存しない「論理プロパティ」も使われています。
.box {
margin-block: 16px; /* 上下（縦方向） */
margin-inline: 8px; /* 左右（横方向） */
padding-block: 8px;
padding-inline: 16px;
}将来的に多言語対応や縦書きを考慮したい場合は、論理プロパティで統一しておくと保守性が高まります。
7. margin / padding でよくあるつまずきと対処法
7-1. margin が効かないように見えるケース
次のような場合、margin が効いていないように見えることがあります。
- インライン要素（
spanなど）に上下の margin を指定している - Flexbox の子要素で、親に
gapも同時指定している - 親要素に
overflow: hidden;やdisplay: flex;などが設定されている
CSS全体が正しく読み込まれていないケースも含め、「CSSが反映されないときの原因と対処法まとめ」で基本的な確認手順を押さえておくと、トラブルシューティングがしやすくなります。
7-2. margin の相殺（margin collapsing）
前述の通り、ブロック要素の上下 margin は重なり合うと相殺されます。セクションの最初の要素が margin-top を持っている場合、親要素の padding-top を使って余白を作ると、相殺を避けられます。
.section {
padding-top: 40px; /* 子要素の margin-top ではなく、親の padding-top で余白を作る */
}7-3. padding で幅がはみ出す
box-sizing: content-box のまま padding を増やすと、想定よりも幅や高さが大きくなり、横スクロールの原因になることがあります。この場合は、次のどちらかで対処します。
- コンテナ幅を
calc()などで調整する box-sizing: border-box;を採用する
レイアウト調整の際は、ブラウザの開発者ツールでボックスモデルを確認しながら進めると、原因を特定しやすくなります。
8. 余白設計をルール化するコツ
8-1. 余白のスケールを決める
サイト全体の余白をバラバラに指定すると、統一感がなくなりやすくなります。
たとえば次のように「スケール」を決める方法があります。
- 4px 単位で増やす: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64…
- 8px 単位で増やす: 8 / 16 / 24 / 32 / 48 / 64…
コンポーネントごとに「このパターンから選ぶ」というルールを決めておくと、デザインのブレを防ぎやすくなります。
8-2. 「どちら側に margin を持たせるか」を決める
レイアウト全体の保守性を考えると、次のようなルールを決めておく方法も有効です。
- セクションの「上余白」はセクション自身の
margin-topに統一する - リストアイテムは「下余白」に
margin-bottomを持たせる - 要素内の余白は必ず
paddingで付ける
このようなルールは、WordPressテーマのテンプレートやSCSS設計とも関連してきます。テーマファイルの編集方針は「WordPressでテーマファイルを編集する方法（初心者向け）」などとあわせて整理しておくと、実装が安定しやすくなります。
9. 関連知識とあわせておきたいポイント
margin / padding の設計は、次のような基本知識と一緒に整理しておくと、よりスムーズに扱えるようになります。
- 単位の考え方 … 「CSSでサイズ指定を理解する｜px・em・remの違い」
- ブラウザ初期スタイルのリセット … 「CSSリセットの基本｜ブラウザ差異をなくす方法」
- レスポンシブ対応 … 「CSSでメディアクエリを使う方法」
- スタイルが反映されないときの確認 … 「CSSが反映されないときの原因と対処法まとめ」
- WordPress テーマへの反映 … 「wp_enqueue_style / wp_enqueue_script の基本」
これらの基礎をそろえておくことで、margin と padding を使った余白設計が再現しやすくなり、デザインの再利用もしやすくなります。
まとめ
- margin は「要素の外側の余白」
要素同士の距離を調整し、背景色は適用されず、クリック領域にも含まれない。 - padding は「要素の内側の余白」
中身と枠の距離を調整し、背景色が塗られ、クリック領域にも含まれる。 - セクション間の距離など「レイアウトのすき間」は margin、ボタンやカード内テキストのような「中身を読みやすくするための余白」は padding で調整するのが基本。
- margin の相殺や
box-sizingの違いを理解しておくと、予期しないレイアウト崩れを防ぎやすい。 - サイト全体で余白のスケールやルールを決めると、見た目に統一感が出て保守性も高まる。
margin と padding の役割を明確に分けて使うことで、CSSレイアウトのコントロールが格段にしやすくなります。