`margin-inline` 左右の外側の余白をまとめて指定する

重要度4 / 5

意味

左右の外側の余白を、まとめて指定します。margin-left と margin-right を分けて書く代わりに使います。auto を付けると、幅が決まっている要素を中央に寄せられます。

文章の方向が右から左のページでも、始点側と終点側として効きます。日本語の横書きでは、見た目は左右の余白です。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">左右の余白を自動にして、中央に寄せます。</div>

CSS

.card {
  width: min(100%, 20rem);
  margin-inline: auto;
  background: #efeef8;
  padding: 0.75rem 1rem;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）