Documentation CSS

概要

margin-blockプロパティは、CSSの論理プロパティの一つで、要素のブロック軸（通常は上下）のマージンを一括で設定するためのプロパティです。書字方向（writing-mode）に応じて適用される方向が変わるため、多言語対応のサイトや縦書きレイアウトにおいて特に便利です。

この記事では、margin-blockの基本的な使い方から、論理プロパティの概念、実践的な活用方法まで詳しく解説します。

margin-blockの基本

基本構文

/* 単一値: 上下両方に同じマージン */
margin-block: 20px;

/* 2つの値: 上（block-start）と下（block-end） */
margin-block: 10px 30px;

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

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

値の説明

指定方法説明
margin-block: 20px;上下両方に20pxのマージン
margin-block: 10px 30px;上に10px、下に30pxのマージン
margin-block: auto;ブラウザが自動計算

物理プロパティとの対応

横書き（writing-mode: horizontal-tb）の場合

/* 論理プロパティ */
margin-block: 20px 30px;

/* 対応する物理プロパティ */
margin-top: 20px;
margin-bottom: 30px;

縦書き（writing-mode: vertical-rl）の場合

/* 論理プロパティ */
margin-block: 20px 30px;

/* 対応する物理プロパティ（縦書きでは左右になる） */
margin-right: 20px;  /* block-start */
margin-left: 30px;   /* block-end */

関連する論理プロパティ

論理プロパティ横書きでの対応
margin-blockmargin-top + margin-bottom
margin-block-startmargin-top
margin-block-endmargin-bottom
margin-inlinemargin-left + margin-right
margin-inline-startmargin-left
margin-inline-endmargin-right

実践的な使用例

基本的な使用例

<article class="article">
  <h1>記事のタイトル</h1>
  <p>これは記事の本文です。</p>
</article>
.article h1 {
  margin-block: 0 24px; /* 上は0、下に24pxのマージン */
  font-size: 32px;
}

.article p {
  margin-block: 16px; /* 上下に16pxのマージン */
  line-height: 1.8;
}

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

<main>
  <section class="section">
    <h2>セクション1</h2>
    <p>内容...</p>
  </section>
  <section class="section">
    <h2>セクション2</h2>
    <p>内容...</p>
  </section>
</main>
.section {
  margin-block: 48px;
  padding: 24px;
  background: #f9f9f9;
  border-radius: 8px;
}

.section h2 {
  margin-block: 0 16px;
}

.section p {
  margin-block: 0;
}

カードコンポーネント

<div class="card">
  <img src="image.jpg" alt="カード画像" class="card__image">
  <div class="card__content">
    <h3 class="card__title">カードタイトル</h3>
    <p class="card__text">カードの説明文がここに入ります。</p>
  </div>
</div>
.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card__content {
  padding: 16px;
}

.card__title {
  margin-block: 0 8px;
  font-size: 18px;
}

.card__text {
  margin-block: 0;
  color: #666;
  line-height: 1.6;
}

縦書きレイアウトでの使用

<div class="vertical-text">
  <p class="paragraph">これは縦書きのテキストです。</p>
  <p class="paragraph">margin-blockは右と左に適用されます。</p>
</div>
.vertical-text {
  writing-mode: vertical-rl;
  height: 400px;
  padding: 20px;
  border: 1px solid #ccc;
}

.paragraph {
  margin-block: 20px; /* 縦書きでは左右のマージンになる */
  padding: 10px;
  background: #f0f8ff;
}

リストアイテムの間隔

<ul class="feature-list">
  <li>高速なパフォーマンス</li>
  <li>直感的なUI</li>
  <li>充実したサポート</li>
</ul>
.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  margin-block: 12px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.feature-list li:first-child {
  margin-block-start: 0;
}

.feature-list li:last-child {
  margin-block-end: 0;
}

margin-block-start / margin-block-end

個別に指定する場合は、margin-block-startとmargin-block-endを使用します。

.element {
  /* ショートハンドで指定 */
  margin-block: 10px 20px;

  /* 個別に指定（同じ結果） */
  margin-block-start: 10px;
  margin-block-end: 20px;
}

使い分け

/* 最初の要素だけ上マージンを削除 */
.container > *:first-child {
  margin-block-start: 0;
}

/* 最後の要素だけ下マージンを削除 */
.container > *:last-child {
  margin-block-end: 0;
}

margin-inlineとの組み合わせ

margin-blockとmargin-inlineを組み合わせることで、すべての方向のマージンを論理的に設定できます。

.centered-box {
  /* ブロック軸（上下） */
  margin-block: 40px;

  /* インライン軸（左右） */
  margin-inline: auto;

  width: 80%;
  max-width: 800px;
}

従来の書き方との比較

/* 従来の物理プロパティ */
.box-physical {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

/* 論理プロパティ */
.box-logical {
  margin-block: 40px;
  margin-inline: auto;
}

ユーティリティクラスの作成

/* マージンユーティリティ（論理プロパティ版） */
.mb-0 { margin-block: 0; }
.mb-1 { margin-block: 4px; }
.mb-2 { margin-block: 8px; }
.mb-3 { margin-block: 12px; }
.mb-4 { margin-block: 16px; }
.mb-5 { margin-block: 24px; }
.mb-6 { margin-block: 32px; }
.mb-8 { margin-block: 48px; }

/* 個別方向 */
.mbs-0 { margin-block-start: 0; }
.mbe-0 { margin-block-end: 0; }

注意点

1. 書字方向による違い

margin-blockは書字方向に依存するため、予期しない結果を避けるには書字方向を意識する必要があります。

/* 横書き（デフォルト） */
.horizontal {
  writing-mode: horizontal-tb;
}

.horizontal .box {
  margin-block: 20px; /* 上下に適用 */
}

/* 縦書き */
.vertical {
  writing-mode: vertical-rl;
}

.vertical .box {
  margin-block: 20px; /* 左右に適用（ブロック軸が変わる） */
}

2. ブラウザサポート

モダンブラウザでは広くサポートされていますが、古いブラウザには対応していません。

/* フォールバック付きの指定 */
.element {
  /* フォールバック（物理プロパティ） */
  margin-top: 20px;
  margin-bottom: 20px;

  /* 論理プロパティ（サポートしているブラウザで上書き） */
  margin-block: 20px;
}

3. マージン相殺

margin-blockも通常のマージンと同様に、隣接するブロック要素間でマージン相殺が発生します。

.box1 {
  margin-block-end: 20px;
}

.box2 {
  margin-block-start: 30px;
}

/* 間のマージンは50pxではなく30px（大きい方）になる */

ブラウザサポート

ブラウザサポート状況
Chrome87以降
Firefox66以降
Safari14.1以降
Edge87以降
Opera73以降

まとめ

margin-blockプロパティは、ブロック軸のマージンを効率的に設定できる論理プロパティです。

主なポイント:

  • 上下のマージンを一括で設定可能
  • 書字方向（writing-mode）に応じて適用方向が変わる
  • margin-block-start、margin-block-endで個別指定も可能
  • margin-inlineと組み合わせて全方向を論理的に設定
  • 多言語対応サイトや縦書きレイアウトで特に有用

論理プロパティを活用することで、国際化対応やレスポンシブデザインがより柔軟になります。

参考文献

円