概要

CSSのmargin-blockプロパティは、要素のブロック軸に沿ったマージン（上下のマージン）を一括で設定するためのプロパティです。このプロパティは、ページの書字方向（横書き・縦書き）にかかわらず、上下のマージンを統一的に設定できるため、コードの簡潔さやデザインの一貫性を保つのに非常に便利です。margin-topやmargin-bottomの代わりに使用することで、ブロック軸のマージンをより柔軟に調整できます。

margin-blockの基本構文

selector {
  margin-block: <start> <end>;
}

  • <start>
    ブロック軸の始点（通常は上）のマージンを指定します。

  • <end>
    ブロック軸の終端（通常は下）のマージンを指定します。

単一値の指定

  • margin-block: 20px;
    上下のマージンを同じ値（20px）に設定します。

複数値の指定

  • margin-block: 10px 20px;
    上側に10px、下側に20pxのマージンを設定します。

使用例

基本的な使用例 - ブロック軸のマージンを設定する

以下の例では、margin-blockを使って、上下のマージンを簡潔に指定しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>margin-blockの使用例</title>
    <style>
      .box {
        background-color: #f0f0f0;
        padding: 20px;
        margin-block: 20px; /* 上下のマージンを一括で20pxに設定 */
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box">このボックスは上下に20pxのマージンがあります。</div>
    <div class="box">簡単に上下のマージンを統一できます。</div>
  </body>
</html>

解説

  • margin-block: 20px;
    上下のマージンを一括で20pxに設定しています。これにより、margin-topとmargin-bottomを個別に設定する必要がなく、コードがシンプルになります。

応用例 - 書字方向の異なるレイアウトでの使用

margin-blockは書字方向に依存しないため、横書き・縦書きどちらのレイアウトでも適用できます。以下の例では、縦書きの文書でmargin-blockを使用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>縦書きのmargin-block使用例</title>
    <style>
      .container {
        writing-mode: vertical-rl; /* 縦書きの設定 */
        border: 1px solid #333;
        padding: 20px;
      }
      .box {
        background-color: #e0e0e0;
        padding: 10px;
        margin-block: 15px 25px; /* 縦書きでも上下にマージンを設定（右と左に適用） */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">このボックスは縦書きの文書に対応しています。</div>
      <div class="box">上下のマージンが右と左に適用されています。</div>
    </div>
  </body>
</html>

解説

  • writing-mode: vertical-rl;
    縦書きの設定により、ブロック軸が上下から右と左に変わりますが、margin-blockは正しく適用されます。
  • margin-block: 15px 25px;
    この設定により、右側（ブロックの始点）に15px、左側（ブロックの終端）に25pxのマージンが設定されます。

margin-blockの注意点

  • 書字方向に応じた適用
    margin-blockは書字方向によってマージンの適用箇所が変わります。横書きでは上下、縦書きでは左右にマージンが適用されます。そのため、意図しない位置にマージンが設定されないように、書字方向をしっかりと確認する必要があります。
  • 他のマージンプロパティとの併用に注意
    margin-topやmargin-bottomと一緒に使用する場合、指定が競合する可能性があります。margin-blockを使う場合は、他のマージン設定とのバランスを意識して調整しましょう。
  • ブラウザサポート
    margin-blockは比較的新しいプロパティで、すべてのブラウザで完全にサポートされているわけではありません。ターゲットとするブラウザのサポート状況を確認してから使用することが重要です。

まとめ

margin-blockプロパティは、ブロック軸に沿った上下のマージンを一括で設定するための便利なツールです。書字方向に依存せずに使えるため、横書き・縦書きのレイアウトでのデザイン調整が簡単になります。margin-topやmargin-bottomの代わりに使うことで、コードを簡潔に保ちつつ、デザインの一貫性を高めることが可能です。使用する際は、書字方向や他のマージン設定との兼ね合いを考慮し、最適なレイアウトを実現しましょう。

参照:

`CSS` margin-block property - MDN Web Docs