概要

CSSのmargin-inlineプロパティは、要素のインライン軸に沿ったマージン（左右のマージン）を一括で設定するためのプロパティです。このプロパティは、ページの書字方向（左から右、右から左、縦書き）にかかわらず、左右のマージンを統一的に設定できるため、デザインの一貫性を保ちながらコードを簡潔に保つことができます。margin-leftやmargin-rightの代わりに使用することで、インライン軸のマージンを効率的に調整可能です。

margin-inlineの基本構文

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

  • <start>
    インライン軸の始点（通常は左）のマージンを指定します。

  • <end>
    インライン軸の終端（通常は右）のマージンを指定します。

単一値の指定

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

複数値の指定

  • margin-inline: 10px 20px;
    左側に10px、右側に20pxのマージンを設定します。

使用例

基本的な使用例 - インライン軸のマージンを設定する

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

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

解説

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

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

margin-inlineは書字方向に依存しないため、左から右、右から左、縦書きなど、どのレイアウトでも適用できます。以下の例では、右から左（RTL）の文書でmargin-inlineを使用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>RTL文書のmargin-inline使用例</title>
    <style>
      .container {
        direction: rtl; /* 右から左の書字方向を設定 */
        border: 1px solid #333;
        padding: 20px;
      }
      .box {
        background-color: #e0e0e0;
        padding: 10px;
        margin-inline: 15px 25px; /* 右側に15px、左側に25pxのマージンを設定 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">このボックスは右から左の文書に対応しています。</div>
      <div class="box">左右のマージンが適用されています。</div>
    </div>
  </body>
</html>

解説

  • direction: rtl;
    右から左の書字方向に設定することで、インライン軸の始点と終点が逆になります。
  • margin-inline: 15px 25px;
    右端（インラインの始点）に15px、左端（インラインの終端）に25pxのマージンが設定されます。

margin-inlineの注意点

  • 書字方向に応じた適用
    margin-inlineは書字方向によって適用される方向が変わります。通常の左から右（LTR）では左右、右から左（RTL）では左右が反転、縦書きでは左右が上下に置き換わる場合があります。そのため、書字方向をしっかりと確認して設定しましょう。
  • 他のマージンプロパティとの併用に注意
    margin-leftやmargin-rightと併用する場合、指定が競合する可能性があります。margin-inlineを使用する場合は、他のマージン設定とのバランスを意識し、意図しない配置にならないように調整しましょう。
  • ブラウザサポート
    margin-inlineは比較的新しいプロパティで、古いブラウザではサポートされていない可能性があります。ターゲットブラウザの互換性を確認してから使用することが重要です。

まとめ

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

参照:

`CSS` margin-inline property - MDN Web Docs