【入門編】display: inlineとinline-blockの差異 – HTML実践ガイド

この子たちは、例えるなら「文章の中に溶け込む単語」です。本の中にある一文字一文字と同じように、前後の文字と肩を並べて生きています。

• 性格の特徴:
• 横一列に並ぶ（改行しない）。
• 自分に必要な分だけの幅しか持たない。
• 【重要】幅（width）や高さ（height）を指定しても無視される。
• 上下の余白（margin-top/bottom）も、基本的には効かない。

「幅や高さを指定しても無視される」というのは、彼らが「文章の行列を乱さないように」と健気に振る舞っているから。個人のワガママ（固定サイズ）よりも、文章全体の流れを優先する「空気を読む性格」なんですね。

—

2. `inline-block`は「個性を持ち込めるインライン」

一方で、CSSで`display: inline-block;`を指定した瞬間、その要素は少しだけ性格が変わります。

これは、「文章の中にいるけれど、自分の敷地（幅や高さ）をしっかり主張できる人」というイメージです。横並びというインラインの利点はそのままに、ブロック要素のように「自分専用のボックスサイズ」を自由に設定できるようになります。

• 性格の特徴:
• 横一列に並ぶ（これはインラインと同じ！）。
• 幅（width）や高さ（height）を自由に指定できる。
• 余白（marginやpadding）もしっかり効く。

まさに「いいとこ取り」のような存在ですね！

—

3. コードで動きを確認してみましょう

言葉だけだと少し硬いので、実際のコードで比較してみます。ぜひ、お手元のエディタにコピペして試してみてくださいね。

私はinlineです。サイズ指定は効きません…
私はinline-blockです！自由なサイズを持てます！

どうでしょう？緑色のボックス（inline-block）だけが、指定したサイズ通りに表示されたはずです。

—

4. 現場でつまずきやすい「謎の隙間」の正体

最後に、現場でみんなが頭を抱えるポイントを一つだけ。

`inline-block`を使うと、要素と要素の間に「数ピクセル程度の謎の隙間」ができることがあります。「marginもpaddingも0にしたのに、なぜ！？」と夜も眠れなくなるかもしれませんが、安心してください。

これはCSSのバグではなく、「HTMLコードを書くときに入れた改行やスペース」が、ブラウザ上で「半角スペース」として認識されているからなんです。

• 解決策:
• 親要素に `font-size: 0;` をかけて隙間を消す。
• HTMLのタグ同士を改行せずにくっつけて書く。
• 最近では `display: flex;` （フレックスボックス）を使って横並びにする手法が主流。

—

最後に：完璧に覚えようとしなくて大丈夫！

「`inline`だっけ？ `inline-block`だっけ？」と迷うことは、プロの現場でもよくあります。最初は「横並びにしたいなら`inline`の仲間かな？ サイズ指定したいなら`inline-block`にすればいいんだな」と、それくらいの感覚で使い始めてみてください。

失敗してレイアウトが崩れても、「あ、この子（要素）は今、こういう性格で振る舞っているんだな」と観察してあげれば、CSSは必ずあなたの思い通りに動いてくれます。

Web制作の世界へようこそ。焦らず、少しずつ楽しんでいきましょうね！