CSS: CSSマージンとパディング
最終更新：2026-10-13
CSSの余白には2つのタイプがあります：パディングとマージンです。これらは要素の「内側の余白」と「外側の余白」を制御する重要なプロパティです。
余白プロパティ早見表
| プロパティ | よく使う値 | 用途 |
|---|---|---|
padding |
16px、10px 20px、10px 5px 15px 20px |
パディング（上、右、下、左） |
padding-top/right/bottom/left |
16px、5% |
片側のパディング |
margin |
20px、0 auto、10px 0 20px 0 |
マージン（上、右、下、左） |
margin-top/right/bottom/left |
10px、auto |
片側のマージン |
auto |
margin: 0 auto |
ブロック要素を水平方向に中央揃え |
💡 マージンの省略ルール： 4つの値（上、右、下、左）→ 3つの値（上、左+右、下）→ 2つの値（上+下、左+右）→ 1つの値（すべての側が等しい）。
1. パディング
paddingはコンテンツエリアとボーダーの間のスペースで、要素の「内側の余白」です。
▶ サンプル
▶ 試してみよう(1) 個別の側を設定
▶ サンプル
▶ 試してみよう(2) パディングの省略ルール
💡 記憶のコツ： パディング/マージンの省略形は「上」から時計回り——上、右、下、左。覚えられない？「12時の方向から時計回り」と考えましょう。2つの値は「上+下、左+右」を意味します。
CSS
/* 1つの値：すべての側が等しい */
padding: 20px;
/* 2つの値：上+下、左+右 */
padding: 10px 20px;
/* 3つの値：上、左+右、下 */
padding: 10px 20px 30px;
/* 4つの値：上、右、下、左（時計回り） */
padding: 10px 20px 30px 40px;
(3) パディングのよく使うケース
▶ サンプル
▶ 試してみよう(4) パディングの注意点
📌 インライン要素の注意：
<span>、<a>などのインライン要素のパディングは水平方向にのみ効果があります。インライン要素で完璧なクリックエリアを作りたい場合は、display: inline-blockを設定してください。
- パディングエリアには要素の背景色と画像が表示されます
- パディングは要素を「大きく」します（
box-sizing: border-boxを使用していない場合） - インライン要素（
<span>など）は水平方向のパディングのみ有効です
2. マージン
marginは要素のボーダーと他の要素の間のスペースで、要素の「外側の余白」です。
▶ サンプル
▶ 試してみよう(1) マージンの省略ルール
パディングと同じです：
CSS
margin: 20px; /* すべての側が等しい */
margin: 10px 20px; /* 上+下、左+右 */
margin: 10px 20px 30px; /* 上、左+右、下 */
margin: 10px 20px 30px 40px; /* 上、右、下、左 */
(2) マージンのよく使うケース
▶ サンプル
▶ 試してみよう(3) margin: autoによる中央揃え
margin: 0 autoは、ブロック要素を親要素内で水平方向に中央揃えできます：
▶ サンプル
▶ 試してみよう3. マージンの折りたたみ
⚠️ 古典的な罠： 隣接する垂直マージンは大きい方の値に折りたたまれます——これを「マージンの折りたたみ」と呼びます。最も簡単な修正方法は、親要素に
overflow: hiddenまたはpadding: 1pxを追加することです。flexコンテナを使用しても防止できます。
これは重要なCSS概念です——隣接する垂直マージンは1つに折りたたまれ、大きい方の値を採用します。
(1) シナリオ1：隣接する兄弟要素
▶ サンプル
▶ 試してみよう(2) シナリオ2：親子要素
親にパディング、ボーダー、コンテンツがない場合、子のマージンが親の外側に「貫通」します：
▶ サンプル
▶ 試してみよう回避方法：
- 親に
padding: 1pxを追加（または任意の正の値） - 親に
border: 1px solid transparentを追加 - 親に
overflow: hiddenを追加 - flexまたはgridレイアウトを使用
(3) シナリオ3：空の要素
コンテンツ、パディング、ボーダーのないブロック要素も、上下のマージンが折りたたまれます。
(4) マージンが折りたたまれないケース
- 水平マージン（左/右）は折りたたまれない
- flexレイアウトの子要素は折りたたまれない
- フロートされた要素は折りたたまれない
- 絶対位置指定の要素は折りたたまれない
4. パディングとマージンの選択
| シナリオ | どちらを使うか |
|---|---|
| ボタンのテキストが端に触れないようにする | パディング |
| 2つのカードを離す | マージン |
| コンテンツをボーダーから離す | パディング |
| コンテナをページの中央に配置 | margin: auto |
| 背景エリアのサイズを制御 | パディング |
簡単な判断方法：背景色がこのエリアをカバーすべきですか？ はいならパディング、いいえならマージンを使用します。
❓ よくある質問
Q マージンの折りたたみとは何ですか？
A 隣接する垂直マージンは大きい方の値に折りたたまれます。例えば、1つの要素が
margin-bottom: 30px、次の要素がmargin-top: 20pxの場合、実際の間隔は30pxで50pxではありません。親にoverflow: hiddenを追加するか、flexレイアウトを使用すると防止できます。Q パディングで要素が大きくなりすぎ怎么办？
A グローバルに
box-sizing: border-boxを設定してください。これにより、パディングとボーダーが要素の合計幅/高さに含まれ、拡張が防止されます。ほぼすべてのモダンプロジェクトがこれを行っています。Q margin: 0 autoの中央揃えに必要な条件は何ですか？
A 要素には明示的な幅（autoではない）が必要で、ブロック要素（display: block）でなければなりません。インライン要素と幅が設定されていないブロック要素は、margin: autoで中央揃えできません。
📖 まとめ
- パディングとマージンはCSSレイアウトで最もよく使う余白プロパティです
- パディングは内側の余白を制御し、マージンは外側の余白を制御します
- 省略ルールと「マージンの折りたたみ」の罠を理解することは、信頼できるレイアウトに不可欠です
- プロジェクトの開始時にグローバルに
box-sizing: border-boxを設定すると、パディングによる要素の拡張を防止し、寸法計算が簡素化されます
📝 練習問題
- 3つのカードを含む「カードグループ」ページを作成し、マージンでカード間の間隔を制御してください。
- ナビゲーションバーを作成し、パディングで各ナビアイテムのテキストからボーダーまでの距離を制御してください。
- 「マージンの折りたたみ」を実演し、少なくとも2つの異なる方法で解決してください。
margin: 0 autoを使用して、800px幅のコンテナをページの水平方向に中央揃えにしてください。
