【実務・中級編】display: inline-blockとinlineの挙動比較 – HTML実践ガイド

ブラウザのレンダリングエンジンは、インライン要素を「行（Line Box）」の中に配置します。このとき、最も厄介なのが「高さ（height）や上下のパディング（padding-top/bottom）、マージン（margin-top/bottom）が、レイアウトの計算に影響を及ぼさない」という仕様です。

文字通り、彼らは「行の流れ」に従うことしか許されていないのです。

inlineの限界

• `width` / `height` を指定しても無視される。
• 上下の `margin` や `padding` を指定しても、隣接する行には干渉しない（表示は重なる）。

これでは、ボタン一つ作るにも心もとないですよね。そこで登場するのが `inline-block` です。

—

2. inline-block：最強の「二面性」

`display: inline-block` は、いわば「インラインの皮を被ったブロック要素」です。

• インラインの特性: 前後の要素と横に並ぶ。
• ブロックの特性: `width`, `height`, `margin`, `padding` が指定可能。

これだけ聞くと万能に見えますが、ブラウザはこれを「置換要素（`` などに近い扱い）」として処理します。つまり、親要素からは「テキスト」として認識されつつ、自分自身は「箱」として振る舞うという、非常に贅沢なハイブリッド状態なのです。

—

3. 実務で直面する「謎の隙間」の正体

`inline-block` を使った際、コード上はピッタリ隣接させているのに、なぜか数ピクセルの隙間が空く現象を経験したことはありませんか？

これはバグではありません。「ソースコード内の改行やスペースが、テキストノードとしてレンダリングされているから」です。

ブラウザは、HTML内の改行を「半角スペース」として解釈します。`inline-block` 同士の間に改行があると、それがまるで `A B` のように、文字間にスペースが入った状態と同じ計算になるわけです。

解決策：現場のベストプラクティス

この隙間を消すために `font-size: 0` を親に当てる手法がありますが、個人的にはおすすめしません。Flexbox が使える環境なら素直に `display: flex` を使うべきです。しかし、どうしても `inline-block` でなければならないレガシー環境なら、以下のコードが最も堅実です。

—

4. プロの視点：どちらを使うべきか？

今のフロントエンド開発において、レイアウトのための `inline-block` は、正直なところ「最後の手段」になりつつあります。

• 横並びを作りたいだけなら: `display: flex` が正解です。`gap` プロパティを使えば、あの「謎の隙間」問題とも無縁です。
• テキストの中にアイコンを埋め込みたい、あるいは特定の単語だけ装飾したいなら: `inline` または `inline-block` です。

ここが重要です：
`inline` や `inline-block` を使うときは、「ベースライン（Baseline）」を意識してください。インライン要素は、親要素のテキストのベースラインに合わせて整列しようとします。要素の高さが揃わないときは `vertical-align: top;` や `middle` を適切に当てることで、UIのズレを防ぐことができます。

まとめ：次にコードを書くときのアドバイス

1. 「横並びレイアウト」には迷わず `flex` を選ぶ。
2. 「テキスト内の装飾」や「置換要素との親和性」を求めるなら `inline-block` を選ぶ。
3. `inline-block` を使うなら `box-sizing: border-box` は必須。
4. 隙間問題に悩んだら、それは「HTMLの改行」が原因だと疑う。

技術は進歩していますが、こうした「ブラウザが裏側でどう文字を流しているか」という泥臭い知識が、いざという時のデバッグスピードを劇的に変えます。

さあ、自信を持ってコードを書きましょう。あなたの書くコードが、誰かのWeb体験を少しだけ快適にするはずです。