【実務・中級編】inlineとinline-blockのレイアウト特性比較 – HTML実践ガイド

なぜ「display: inline」と「inline-block」の挙動に、今さら深く向き合うべきなのか

フロントエンドの世界に入って数年経つと、`display: flex` や `grid` がレイアウトの主役になり、`inline` や `inline-block` のことを「古臭い手法」と切り捨てがちになります。しかし、現場のコードレビューで後輩のプルリクを見ていると、案外この「基本的な挙動」の理解不足が、「なぜか余白が消えない」「要素の高さが合わない」という不可解なバグを生んでいるケースが後を絶ちません。

今日は、あえて原点に立ち返り、この二つの違いを「ブラウザがどう解釈しているか」という視点から深掘りしてみましょう。ここを正確に理解すれば、CSSでレイアウトを調整する際の「勘」が、一段階鋭いものに変わるはずです。

—

1. 「流れる」か「箱を作る」か：根本的な哲学の違い

まず、ブラウザのレンダリングエンジンがどう考えているかを想像してください。

• `display: inline`: テキストの一部です。行の中に「文字」と同じように流し込まれます。幅や高さという概念はなく、あくまで「中身の文字量に依存する」存在です。
• `display: inline-block`: 「外見はインライン、中身はブロック」というハイブリッド型です。行の中に配置されるのは `inline` と同じですが、箱（ボックス）としての特性（width, height, margin, padding）を完璧に保持します。

決定的な違いのまとめ

| 特性 | inline | inline-block |
| :— | :— | :— |
| width / height | 指定不可（無視される） | 指定可能 |
| margin (上下) | 指定不可 | 指定可能 |
| padding (上下) | 見た目は伸びるが、周囲の行には影響しない | 周囲の要素を押し出す |
| 主な用途 | 文章中の強調、リンクなど | 横並びのボタン、アイコン付きテキスト |

—

2. 現場を悩ませる「謎の隙間」の正体

`inline-block` を使って横並びのメニューを作ったとき、なぜか意図しない「数ピクセルの隙間」ができてしまい、必死にネガティブマージンで調整した経験はありませんか？

実はこれ、ブラウザの「改行」の処理が原因です。HTMLコード内で `