CSS マージン (Margins)

CSS の margin プロパティは、定義されたボーダー（境界線）の外側に、要素の周囲のスペースを作成するために使用されます。

CSS を使用すると、マージンを完全に制御できます。要素の各サイド（上、右、下、左）のマージンを設定するためのプロパティが存在します。

1. マージン - 個別のサイド指定 (Margin - Individual Sides)

CSS には、要素の各サイドのマージンを個別に指定するためのプロパティが用意されています。

• margin-top（上マージン）
• margin-right（右マージン）
• margin-bottom（下マージン）
• margin-left（左マージン）

すべてのマージンプロパティには、以下の値を設定できます。

• auto: ブラウザがマージンを計算します。
• length: px、pt、cm などの単位でマージンを指定します。
• %: 包含要素（親要素）の幅に対するパーセンテージでマージンを指定します。
• inherit: マージンを親要素から継承することを指定します。

Tips: マージンには負の値（ネガティブマージン）を使用することも可能です。

1.1 個別指定のコード例

以下の例では、<p> 要素の各サイドに異なるマージンを設定しています。

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

2. マージンのショートハンドプロパティ (Margin - Shorthand Property)

コードを簡潔にするために、一つの margin プロパティの中にすべてのマージンプロパティを指定することが可能です。これを「ショートハンド（shorthand）」と呼びます。

margin プロパティに指定する値の数によって、適用されるルールが変わります。

2.1 4つの値を指定する場合

margin: 25px 50px 75px 100px; と記述した場合：

• 上マージンは 25px
• 右マージンは 50px
• 下マージンは 75px
• 左マージンは 100px

p {
  margin: 25px 50px 75px 100px; /* 上 右 下 左 の順 */
}

2.2 3つの値を指定する場合

margin: 25px 50px 75px; と記述した場合：

• 上マージンは 25px
• 左右のマージンは 50px
• 下マージンは 75px

p {
  margin: 25px 50px 75px; /* 上 左右 下 */
}

2.3 2つの値を指定する場合

margin: 25px 50px; と記述した場合：

• 上下のマージンは 25px
• 左右のマージンは 50px

p {
  margin: 25px 50px; /* 上下 左右 */
}

2.4 1つの値を指定する場合

margin: 25px; と記述した場合：

• 4つのサイドすべて（上下左右）のマージンが 25px

p {
  margin: 25px; /* 全サイド共通 */
}

3. auto 値の使用 (The auto Value)

margin プロパティを auto に設定すると、要素をそのコンテナ内で水平方向に中央揃えにすることができます。

その場合、要素は指定された幅（width）を占有し、残りのスペースは左右のマージンに均等に分割されます。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

4. inherit 値の使用 (The inherit Value)

以下の例では、<p class="ex1"> 要素の左マージンを親要素（<div>）から継承させます。

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit; /* 親要素の 100px を継承 */
}

5. すべてのマージンプロパティ一覧

6. マージンの相殺 (Margin Collapse)

要素の上下のマージンは、時には一つのマージンに統合（結合）されることがあります。そのサイズは、統合されるマージンのうち最大のサイズと同じになります。

これを「マージンの相殺（Margin Collapse）」と呼びます。

注意: これは左右（左および右）のマージンでは発生しません。上下（上および下）のマージンのみに適用されます。

6.1 マージン相殺の具体例

以下の例を見てみましょう。

• <h1> 要素の下マージンを 50px に設定。
• <h2> 要素の上マージンを 20px に設定。

通常であれば、<h1> と <h2> の間の垂直方向の余白は合計 70px（50px + 20px）になると思われます。しかし、マージンの相殺により、実際の余白は 50px になります。

h1 {
  margin: 0 0 50px 0; /* 下マージン 50px */
}

h2 {
  margin: 20px 0 0 0; /* 上マージン 20px */
}