「あれ、思った通りに動かない…」を解決！インラインとinline-blockの決定的な違い
Web制作を始めたばかりの頃、誰もが一度は「なぜか余白が効かない！」「高さが変わらない！」という壁にぶつかりますよね。
—
インライン要素は「文章の一部」というルール
まず、``や``、``などが属する「インライン要素」の性格を理解しましょう。彼らは「文章の中に溶け込むこと」が至上命題です。
例えるなら、「文章という長い行列の中に並んでいる人たち」です。
行列の中にいる人に「もっと背を高くして！」「横に広くスペースを取って！」と要求しても、列が乱れてしまうので、基本的には受け入れてもらえません。
- 幅（width）や高さ（height）は指定できない
- 上下の余白（margin-top/bottom）も無視される
これがインライン要素の「お行儀の良さ」なんです。
—
そこで登場！「inline-block」という名のハイブリッド選手
「いやいや、並んではいたいけど、ちょっと自分だけのスペースも確保したいんだよ！」というワガママに応えてくれるのが、`display: inline-block`です。
イメージとしては、「行列の中にいながら、自分専用のパーテーションを立てている状態」です。行列のルール（横並び）は守りつつ、自分の幅や高さ、上下の余白を自由にコントロールできるようになります。
比較してみましょう
実際にコードで見てみると一目瞭然です。
インライン
インラインブロック
—
なぜ「inline-block」を使うと幸せになれるのか？
現場で`inline-block`が重宝される理由は、「横並び」を維持しながら「ボックスとしての見た目」を整えられるからです。
例えば、Webサイトのナビゲーションメニューや、タグリストを作る時を想像してみてください。`float`を使ったり、最近では`flexbox`を使うことも多いですが、ちょっとしたボタンを文章の流れの中に置きたい時、`inline-block`は非常に軽快で扱いやすいんです。
つまずきポイント：謎の隙間問題
`inline-block`を使うと、要素と要素の間に「謎の隙間」ができることがあります。これはバグではなく、HTML上の改行やスペースが「1文字分の空白」として認識されているからなんです。
「なんで隙間が…！？」と焦る必要はありません。
- 親要素に `font-size: 0;` を指定する
- HTMLのタグを詰めて書く
といった先人たちの知恵で解決できます。これもWeb制作ならではの「泥臭い愛嬌」だと思って、仲良く付き合っていきましょう。
—
まとめ：道具を使い分ける楽しさ
HTMLの要素にはそれぞれ性格があります。
- インライン要素（span, a, strongなど）: 文章の流れを壊したくない時、言葉を強調したい時に。
- inline-block: 文章の流れはそのままに、ボタンやアイコンなど、形を整えたい時に。
最初からすべてを完璧に使いこなす必要はありません。「あ、ここは高さが必要だから`inline-block`にしてみようかな？」と試行錯誤するだけで、あなたのコーディングはグッとプロに近づきます。
迷ったら、まずは「これは行列に並ばせたいかな？ それとも個室が必要かな？」と想像してみてください。きっと、CSSが今までよりもずっと優しく答えてくれるはずですよ！
コメント