【実務・中級編】インライン要素とwhite-spaceの挙動 – HTML実践ガイド

なぜ「インライン要素の間に謎の隙間」ができるのか？HTMLとwhite-spaceの深淵な関係

フロントエンドの現場で、こんな経験はありませんか？

「`display: inline-block` で並べたボタンの間に、CSSで指定していない1ピクセルか2ピクセルの隙間がある」
「デザインカンプ通りにコーディングしたはずなのに、微妙に横幅がズレてレイアウトが崩れる」

これ、中級エンジニアが一度は必ず直面する「インライン要素のホワイトスペース問題」です。初心者の頃は「CSSのバグかな？」と疑いたくなりますが、実はこれ、HTMLの仕様とブラウザのレンダリングエンジンが忠実であるがゆえの「必然」なのです。

今日は、インライン要素と `white-space` が裏側でどう動いているのか、そしてこの「謎の隙間」をどうエレガントにねじ伏せるのか、プロの知見を共有しましょう。

なぜ「空白」がレンダリングされるのか

結論から言うと、HTMLソースコード上の改行や半角スペースは、ブラウザによって「半角スペース1つ分」の文字として解釈されるからです。

例えば、以下のコードを見てください。

ボタンA
ボタンB

ブラウザはこれを `ボタンA ボタンB` というふうに、ソース上の改行を半角スペースに置き換えて描画します。フォントサイズが16pxなら、その半角スペース分（およそ4px〜8px程度）の隙間が生まれるわけです。これが、CSSで `margin` を設定していないのに隙間ができる正体です。

ブラウザが裏側でやっていること：white-spaceの制御

この挙動を制御するのがCSSの `white-space` プロパティです。デフォルトは `normal` ですが、これは「空白を詰め、改行はスペースとして扱い、長すぎる行は自動改行する」というルールです。

この挙動を理解した上で、実務で使える「隙間を消すための鉄板テクニック」をいくつか紹介します。

1. 親要素でフォントサイズを0にする（王道）

最も確実で、現場でもよく使われるのが「親要素のフォントサイズを0にする」手法です。スペース文字のサイズも0になるため、隙間が物理的に消滅します。

.button-container {
/ 親要素のフォントサイズを0にして隙間を殺す /
font-size: 0;
}

.button-container a {
/ 子要素で必要なフォントサイズを戻すのを忘れずに /
font-size: 16px;
display: inline-block;
}

2. HTMLの書き方を工夫する（泥臭いけど最強）

コードの可読性は少し落ちますが、CSSに依存せずHTMLだけで解決する方法もあります。タグの閉じカッコの直後に次のタグを置く手法です。

ボタンAボタンB

ボタンAボタンB

チームの規約によりますが、CSSを汚したくない場合はこの手法が好まれます。

実践的ベストプラクティス：現代的な解決策

現代のフロントエンド開発であれば、インライン要素の隙間に悩まされるよりも、「そもそもインライン要素を使わない」という設計思想も重要です。

もし横並びのボタンを作るなら、`display: flex` を使うのが今のスタンダードです。`gap` プロパティを使えば、隙間の管理も自由自在です。

.button-container {
/ モダンブラウザならFlexbox一択 /
display: flex;
gap: 10px; / ここで隙間を完璧に制御できる /
}

/ そもそもインラインの特性が必要ないなら、Flexboxで解決するのがベスト /

最後に：なぜ「知っておく」必要があるのか

「じゃあFlexboxだけでいいじゃん」と思うかもしれません。しかし、`` や `` といったテキスト装飾を伴うインライン要素は、文章の流れの中に組み込まれるため、Flexboxでは代替できません。