概要

marginプロパティは、CSSで要素の外側に余白を作るためのプロパティです。要素同士の間隔を調整し、レイアウトの構築やデザインの一貫性を保つために不可欠なツールです。

この記事では、marginの基本的な使い方から、ショートハンドの記法、中央揃え、マージン相殺の対処法まで詳しく解説します。

marginの基本

基本構文

/* 全方向に同じ値 */
margin: 20px;

/* 上下 | 左右 */
margin: 10px 20px;

/* 上 | 左右 | 下 */
margin: 10px 20px 30px;

/* 上 | 右 | 下 | 左（時計回り） */
margin: 10px 20px 30px 40px;

/* キーワード値 */
margin: auto;

/* グローバル値 */
margin: inherit;
margin: initial;
margin: revert;
margin: unset;

ショートハンドの展開

/* 1つの値 */
margin: 20px;
/* 展開すると */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

/* 2つの値 */
margin: 10px 20px;
/* 展開すると */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* 3つの値 */
margin: 10px 20px 30px;
/* 展開すると */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

/* 4つの値 */
margin: 10px 20px 30px 40px;
/* 展開すると */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

個別プロパティ

/* 上側のみ */
margin-top: 20px;

/* 右側のみ */
margin-right: 20px;

/* 下側のみ */
margin-bottom: 20px;

/* 左側のみ */
margin-left: 20px;

論理プロパティ

書字方向に対応した論理プロパティも使用できます。

/* ブロック軸（上下） */
margin-block: 20px;
margin-block-start: 20px;  /* 上 */
margin-block-end: 20px;    /* 下 */

/* インライン軸（左右） */
margin-inline: 20px;
margin-inline-start: 20px; /* 左 */
margin-inline-end: 20px;   /* 右 */

中央揃え（margin: auto）

ブロック要素を水平方向に中央揃えする最も一般的な方法です。

.centered {
  width: 80%;
  max-width: 800px;
  margin: 0 auto; /* 上下は0、左右は自動 */
}

条件

margin: autoで中央揃えを行うには、以下の条件が必要です：

1. ブロック要素であること
2. 幅（width）が指定されていること

/* 動作する */
.works {
  width: 600px;
  margin: 0 auto;
}

/* 動作しない（幅が未指定） */
.not-works {
  margin: 0 auto;
}

Flexboxでの垂直中央揃え

Flexboxコンテナ内では、margin: autoで垂直方向の中央揃えも可能です。

.flex-container {
  display: flex;
  height: 400px;
}

.flex-item {
  margin: auto; /* 水平・垂直両方向に中央揃え */
}

実践的な使用例

レイアウトの基本

<main class="main-content">
  <article class="article">
    <h1>記事タイトル</h1>
    <p>記事の内容...</p>
  </article>
</main>

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.article {
  margin: 40px 0;
}

.article h1 {
  margin: 0 0 24px;
}

.article p {
  margin: 0 0 16px;
}

カードグリッド

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}

.card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

ナビゲーションの間隔

<nav class="nav">
  <a href="/" class="nav-link">ホーム</a>
  <a href="/about" class="nav-link">会社概要</a>
  <a href="/services" class="nav-link">サービス</a>
  <a href="/contact" class="nav-link">お問い合わせ</a>
</nav>

.nav {
  display: flex;
  align-items: center;
}

.nav-link {
  margin: 0 16px;
  padding: 8px 0;
  text-decoration: none;
  color: #333;
}

.nav-link:first-child {
  margin-left: 0;
}

.nav-link:last-child {
  margin-right: 0;
}

セクション間のスペーシング

.section {
  margin: 80px 0;
}

.section:first-child {
  margin-top: 0;
}

.section:last-child {
  margin-bottom: 0;
}

マージン相殺（Margin Collapsing）

隣接するブロック要素の垂直マージンは「相殺」されて、大きい方の値のみが適用されます。

相殺が発生するケース

/* ケース1: 隣接する兄弟要素 */
.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* 結果: 間隔は30px（大きい方） */

/* ケース2: 親と最初/最後の子要素 */
.parent {
  margin-top: 20px;
}
.parent .first-child {
  margin-top: 30px;
}
/* 結果: 親の上マージンは30px（相殺される） */

相殺を防ぐ方法

/* 方法1: padding を追加 */
.parent {
  padding-top: 1px;
}

/* 方法2: border を追加 */
.parent {
  border-top: 1px solid transparent;
}

/* 方法3: overflow を変更 */
.parent {
  overflow: hidden;
}

/* 方法4: display: flow-root */
.parent {
  display: flow-root;
}

/* 方法5: Flexbox/Grid を使用 */
.parent {
  display: flex;
  flex-direction: column;
}

負のマージン

マージンに負の値を設定すると、要素を反対方向に移動させることができます。

/* 要素を上に移動 */
.pull-up {
  margin-top: -20px;
}

/* 要素を左に移動 */
.pull-left {
  margin-left: -20px;
}

使用例：フルブリード画像

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.full-bleed-image {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

使用例：オーバーラップレイアウト

.hero {
  background: #3498db;
  padding: 60px 20px 80px;
  color: #fff;
}

.overlap-section {
  max-width: 800px;
  margin: -40px auto 0;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

レスポンシブデザイン

メディアクエリでの調整

.section {
  margin: 60px 0;
}

@media (max-width: 768px) {
  .section {
    margin: 40px 0;
  }
}

@media (max-width: 480px) {
  .section {
    margin: 24px 0;
  }
}

clamp()を使った流動的なマージン

.section {
  margin: clamp(24px, 5vw, 80px) 0;
}

コンテナ幅に応じたマージン

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* または */
.container {
  margin: 0 max(20px, calc((100% - 1200px) / 2));
}

ユーティリティクラス

/* マージンユーティリティ */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
.m-6 { margin: 24px; }
.m-8 { margin: 32px; }
.m-auto { margin: auto; }

/* 方向別 */
.mt-4 { margin-top: 16px; }
.mr-4 { margin-right: 16px; }
.mb-4 { margin-bottom: 16px; }
.ml-4 { margin-left: 16px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }

marginとpaddingの違い

プロパティ	適用場所	背景色	クリック領域
margin	要素の外側	適用されない	含まれない
padding	要素の内側	適用される	含まれる

.box {
  /* 外側の余白（背景なし） */
  margin: 20px;

  /* 内側の余白（背景あり） */
  padding: 20px;

  background: #3498db;
}

注意点

1. インライン要素への適用

インライン要素には上下のmarginは効果がありません。

/* 効果なし */
span {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 解決策 */
span {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 20px;
}

2. パーセンテージは親の幅基準

すべての方向のパーセンテージマージンは、親要素の幅を基準にします。

.parent {
  width: 400px;
  height: 200px;
}

.child {
  margin: 10%; /* すべて40px（親の幅400pxの10%） */
}

3. 置換要素との違い

<img>や<video>などの置換要素は、マージン相殺が発生しません。

ブラウザサポート

ブラウザ	サポート状況
Chrome	全バージョン
Firefox	全バージョン
Safari	全バージョン
Edge	全バージョン
Opera	全バージョン
IE	全バージョン

marginプロパティはすべてのブラウザで完全にサポートされています。

まとめ

marginプロパティは、要素の外側に余白を作るための基本的かつ強力なプロパティです。

主なポイント:

• ショートハンドで1〜4つの値を指定可能
• margin: 0 autoでブロック要素を水平中央揃え
• マージン相殺を理解し、必要に応じて対策を講じる
• 負のマージンでオーバーラップレイアウトが可能
• レスポンシブデザインではclamp()やメディアクエリを活用

適切なマージン設定により、整理された美しいレイアウトを実現しましょう。

参考文献

• margin - CSS: カスケーディングスタイルシート | MDN
• CSS Box Model Module Level 3 | W3C
• Mastering margin collapsing | MDN