インライン要素とは？block/inline-blockとの違いを解説
インライン要素の概要と重要ポイント
インライン要素は段落内の文字列と同じ行に並び、要素の前後で改行を発生させません。装飾やリンクなど、文中で意味付けをするときに用います。まずは 行内の流れを壊さない役割 を理解し、サイズ指定が必要な場面ではinline-blockへ切り替えるのが基本です。
インライン要素の定義（意味としくみ）
CSSの表示形式としてdisplay:inlineの挙動を持ち、行ボックス内で横方向に箱が連なるモデルです。幅・高さはコンテンツに依存し、上下のmarginはほぼ無視されます。多くのテキスト関連要素（a、span、em、strong、code、brなど）や、置換要素のimgは行内に収まりつつ固有サイズを持ちます（行高はline-heightとvertical-alignで調整します）。
実務での論点（使い分け・レイアウト・落とし穴）
文中リンクや強調はインラインが適しています。一方でバッジ・ボタン風パーツのように幅や高さ、内側余白を厳密にコントロールしたい場合はinline-blockまたはdisplay:blockを選びます。クリック領域を十分に確保したい場合も切替が有効です。特に 上下マージンが効かない特性 と、line-heightに依存するベースラインの挙動は要注意です。
- 文中の意味付け：リンク・強調・短いアイコンはinlineを基本
- サイズ制御：ボタン風UIやバッジはinline-blockへ切替
- 余白設計：上下はpaddingで確保、marginは左右中心に使用
- 整列：アイコンと文字はvertical-alignとline-heightで微調整
- 可読性：テキストを画像化せず、装飾はコントラスト基準を順守
比較・使い分け表
| 項目 | 意味 | 用途 |
|---|---|---|
| インライン（inline） | 行内に並び改行を発生させない。幅/高さは内容依存 | 文中リンク・強調・小アイコンの挿入 |
| インラインブロック（inline-block） | 行内配置だがボックスとして幅/高さ・padding可 | バッジ・ボタン風UI・小さなカード |
| ブロック（block） | 要素前後で改行し、幅は親にフィット | 段落・見出し・セクション・大きなカード |
運用上の注意（SEO・アクセシビリティ）
インライン要素は意味（セマンティクス）を付与して読解を助けます。strongやemは視覚だけでなく機械にも意図を伝えられます。リンクはテキストで判別できるラベルにし、クリック領域が狭い場合はinline-blockでpaddingを付けます。迷ったときは 意味優先のマークアップ を徹底し、見た目はCSSで調整します。
よくある質問（FAQ）
インライン要素にwidthやheightが効かないのはなぜですか？
行内の箱は内容サイズに従う仕様で、明示的な幅・高さは無視されます。サイズ調整が必要ならdisplay: inline-blockまたはblockに変更します。
上下のmarginが効かない代わりにどう余白を作ればよいですか？
paddingで確保するか、inline-blockへ変更します。テキスト行間はline-heightで整え、左右の間隔はmargin-left/rightで調整します。
<a>要素の中にブロック要素を入れても良いですか？
HTML仕様ではアンカーはブロック要素を含められます。カード全体をリンクにする場合は表示をblockやinline-blockにし、十分な余白でクリック領域を確保します。
アイコンとテキストの縦位置がズレます。対処は？
アイコン（img/SVG）にvertical-align: middleやtext-bottomを指定し、親のline-heightを適正化します。必要に応じてinline-block化して高さとpaddingを合わせます。
インライン要素のまとめ
インライン要素は文脈に意味を与えつつ行の流れを保つための基本部品です。サイズや余白を厳密に管理したい場面ではinline-blockやblockを選び、line-heightとvertical-alignで視覚的な整列を整えます。セマンティクス優先でマークアップし、見た目はCSSで段階的に制御すると安定します。
