CSS Magin & Padding

Margin（マージン/外余白）とPadding（パディング/内余白）は、HTML要素の周囲の間隔を制御するためのCSSにおける基本概念です。

これらは、CSSボックスモデル（Box Model）を構成する重要な要素です（他にはContentとBorderが含まれます）。

• Content（コンテンツ）： 要素の内部にあるテキストや画像など。
• Border（ボーダー）： 要素を囲む視覚的な境界線。
• Padding（パディング）： コンテンツとボーダーの間の空間。要素の内側に存在します。
• Margin（マージン）： ボーダーの外側の空間。他の要素との距離を作ります。

1. マージン（Margin）を理解する

マージンは、要素の周囲（定義されたボーダーの外側）に空間を作成します。本質的には、その要素を隣接する他の要素から「押し出す」役割を果たします。

1.1 Margin プロパティ

CSSでは、各辺のマージンを個別に制御するためのプロパティが用意されています。

• margin-top: 要素の上のマージン。
• margin-right: 要素の右のマージン。
• margin-bottom: 要素の下のマージン。
• margin-left: 要素の左のマージン。

コード例：

.element {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 30px;
}

1.2 ショートハンドプロパティ（Shorthand）

利便性を高めるため、CSSには4つの値を一度に設定できるショートハンドプロパティ margin が存在します。

/* 順序：上 右 下 左 (時計回り) */
.element {
  margin: 20px 30px 20px 30px; 
}

さらに短縮された記述形式もあります：

• margin: 上下 左右;（例：margin: 20px 30px;）
• margin: 四辺一括;（例：margin: 20px;）

コード例：

.element1 {
  margin: 20px 30px; /* 上下 = 20px, 左右 = 30px */
}
.element2 {
  margin: 20px; /* 四辺すべて = 20px */
}

1.3 自動マージン（Auto Margin）

auto 値は、マージンプロパティで使用できる特殊なキーワードです。

ブロックレベル要素（block-level element）の左右のマージンに適用すると、その要素を親コンテナ内で水平方向に自動で中央揃え（センタリング）します。

コード例：

.container {
  width: 500px;
  border: 1px solid black;
}
.centered-element {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <div class="centered-element">この要素は水平中央に配置されます</div>
</div>

注意：上下のマージンに auto を設定しても、通常は視覚的な効果はありません（FlexboxやGridレイアウト、または特定の高さが定義されている場合を除きます）。

1.4 マージンの相殺（Margin Collapsing）

マージンの相殺とは、隣接するブロックレベル要素の垂直方向のマージン（上と下）が重なった際、それらが合計されず、「大きい方の値」に統合されるCSSの挙動です。

コード例：

<div style="margin-bottom: 20px;">要素 1</div>
<div style="margin-top: 30px;">要素 2</div>

• 予想： 20px + 30px = 50px の間隔。
• 実際： 30px（大きい方の値が採用される）。

相殺を防ぐには？

• ボーダー（border）またはパディング（padding）を追加する。
• overflow: hidden や display: flex を使用して、ブロック整形文脈（BFC）を作成する。

2. パディング（Padding）を理解する

パディングは、要素のボーダーとその内容の間に空間を作成します。マージンと異なり、パディングは（box-sizing: border-box を使用しない限り）要素全体のサイズを増加させます。

2.1 Padding プロパティ

マージンと同様に、パディングにも個別のプロパティ（padding-top, padding-right など）とショートハンドがあります。

/* ショートハンドの例 */
.element {
  padding: 20px 30px; /* 上下 20px, 左右 30px */
}

2.2 Padding と要素のサイズ

デフォルトの設定では、パディングは要素の幅（width）と高さ（height）に加算されます。

.element {
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

• 視覚的な幅の計算： 200px (コンテンツ) + 20px (左パディング) + 20px (右パディング) + 1px (左ボーダー) + 1px (右ボーダー) = 242px。

3. Margin vs. Padding：主な違いのまとめ

4. 実戦例とデモンストレーション

4.1 示例 1：ボタンの周囲にスペースを作る

<button style="margin: 10px;">クリック</button>
<span>ボタンの隣にあるテキスト。</span>

これにより、ボタンの周囲に10pxの空間ができ、テキストとの間に適切な距離が生まれます。

4.2 示例 2：テキスト入力欄の内部余白を増やす

<input type="text" style="padding: 10px;">

入力欄の内側に10pxのパディングを追加することで、入力した文字が枠線に密着せず、読みやすさが向上します。

4.3 示例 3：Margin を使ったコンテナの中央揃え

.container {
  width: 80%;
  max-width: 960px;
  margin: 0 auto; /* 上下 0, 左右自動 */
  border: 1px solid #ccc;
  padding: 20px;
}

margin: 0 auto によってコンテナは画面の中央に配置されます。また、padding により内部のコンテンツが枠線に触れないように調整されています。

4.4 示例 4：ネガティブマージン（Negative Margins）

マージンには負の値を設定することも可能です。これにより、要素を隣接する要素に近づけたり、重なり合わせたりすることができます。

.overlap {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-right: -50px;   /* 次の要素と重なる */
  display: inline-block;
}
.adjacent {
  width: 150px;
  height: 100px;
  background-color: lightcoral;
  display: inline-block;
}

注意：ネガティブマージンは意図しないレイアウト崩れの原因になりやすいため、慎重に使用する必要があります。