並び・配置

`display: inline` 文字の流れに乗せる

重要度4 / 5

意味

要素を、文章の途中に乗る部品にする場合に使います。<span> や <a>、<em>、<strong> の初期値です。

外側の描画です。前後の文字と同じ行に並び、行が足りなくなれば折り返します。width と height は、画像など置き換え要素を除き、基本は効きません。左右の margin と padding は空きを作りますが、上下を大きくしても、行の高さの扱いがブロックほど単純ではありません。

内側の描画です。中にブロックを入れると、ブラウザが構造を直して並びが崩れやすいです。強調やリンクなど、文の一部だけを囲む用途向きです。

寄せ方です。インライン要素を左右へ寄せたい場合は、親のブロックに text-align を付けます。自分に margin: auto を付けても、ブロックのような左右中央にはなりません。

デザインを再現するときの影響です。本文中のリンク色や太字は inline のままで足ります。ボタンのように幅・高さ・余白を揃えた箱を横に並べたい場合は、inline-block か flex の子にします。inline のまま width を指定しても、見た目が変わらないことが多いです。

コード

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

HTML

<p>本文の<span class="mark">途中</span>に乗ります。幅は文字の長さです。</p>

CSS

.mark {
  display: inline;
  background: #efeef8;
  padding: 0 0.25rem;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	1〜
Firefox	1〜
Safari	1〜
Edge	12〜
Chrome Android	18〜
Safari iOS	1〜

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