Web制作をしていると、地味に何度も踏む地雷があります。そう、スペース問題です。
「半角スペースを3個入れたのに 1個に見える」「全角スペースで整えたら後で崩壊」「 を並べてたら修正が地獄」など、あるあるが多すぎる。
でも安心してください。ルールさえ押さえれば、HTMLのスペースは思い通りに制御できます。しかもコードが読みやすく、運用で壊れにくい形で。
この記事では、まず基本ルールを整理し、目的別に「これが正解」という入れ方を7つに分けて解説します。最後に2026年時点の最新寄りの改善策（CJK組版向けCSS）も紹介します。
まず結論 スペース調整はHTMLよりCSSが勝つ
見た目の余白（レイアウト）を作りたいなら、基本はCSSでやるのが正解です。理由はシンプルで、後から直しやすいから。
HTMLに空白を埋め込むと「どこに何個入れたか」が見えにくくなります。デザイン改修で余白の基準が変わった瞬間、探して直すコストが爆上がりします。
ただし例外もあります。文字の途中に「改行させたくない空白」を入れたい場合など、HTML側で空白を制御する価値があるケースもあります。そこを目的別に分けて整理するのがこの記事の狙いです。
HTMLスペースが思い通りにならない2つの基本ルール
連続した半角スペースは基本 1つにまとめられる
HTMLは連続した半角スペースを、そのままの数では表示しません。ブラウザは多くの場合「空白を畳む（統合する）」動きをします。
これはバグではなく仕様です。ソースコード内で読みやすいように改行やインデントを入れても、見た目が余計に崩れないようにするための設計です。
つまり「スペースを何個も連打して見た目を調整する」は、基本的に勝てない戦いです。
レイアウト目的で全角スペースは使わない
全角スペースで整えるのは、一見ラクですが、実務では避けるのが無難です。
- ソースで半角と全角が判別しにくく、地味にバグる
- 検索エンジンが単語の区切りと誤認し、評価に影響する可能性がある
- 読み上げやコピー時に意図しない挙動になる場合がある
見た目を揃えたいなら、余白はCSSに任せる。これが長期運用の強い味方です。
目的別 HTMLでスペースを入れる方法7選
1 文字間を少しだけ調整したいなら 文字参照を使う
文章の中で、ほんの少しだけ間を空けたい。例えば日付のスラッシュ前後、記号の前後、単位との間など。こういう「局所的な微調整」には文字参照（キャラクターリファレンス）が効きます。
代表例です。
-   かなり狭いスペース
- 改行しない半角スペース（Non Breaking Space）
-   半角より少し広め
-   全角相当
例えば日付は、詰まりすぎると読みにくい時があります。
<p>2025 / 09 / 27</p>また「100 km」のように数値と単位を分離させたくない場合は が便利です。
<p>100 km 走った</p>ただし注意です。レイアウトを作るために を並べ始めた瞬間、保守性が死にます。文字参照はあくまで「文章の意味を保つための空白」に限定するのがコツです。
2 文字間隔を全体的に整えるなら letter-spacing
見出しやキャッチコピーで「字が詰まって見える」「少し広げたい」なら、HTMLに空白を足すよりCSSのletter-spacingが正解です。
<h2 class="title">見出しの文字間を調整</h2>
.title {
letter-spacing: 0.08em;
}ポイントはem指定です。フォントサイズが変わっても比率で効くので、レスポンシブでも破綻しにくいです。
デメリットは、長文本文には効かせすぎると読みづらくなること。見出しなど短いテキストに使うのが安全です。
3 改行や連続スペースをそのまま表示したいなら pre
入力したとおりに空白や改行を見せたい。例えばコード、整形済みテキスト、AA（今はあまり見ないですが）など。そういう時はpreが素直です。
<pre>
function hello() {
console.log("Hello, world!");
}
</pre>メリットは簡単で確実なこと。デメリットは自動折り返しが効かず、横にはみ出しやすいことです。実務では、横スクロールさせるCSSをセットで持っておくと安心です。
pre {
overflow-x: auto;
white-space: pre;
}4 HTMLを変えずに空白と改行を制御するなら white-space
preは便利ですが、HTML構造を変えたくない時もあります。そこでwhite-spaceです。空白の統合、改行の扱い、折り返しを制御できます。
よく使う値はこのあたり。
- normal 既定 連続空白は統合 折り返しあり
- nowrap 空白は統合 折り返しなし
- pre 入力どおり保持 折り返しなし
- pre-wrap 入力どおり保持 折り返しあり
- pre-line 連続空白は統合 改行は維持 折り返しあり
- break-spaces 空白をより厳密に保持しつつ折り返す
例えば住所や歌詞など「改行は残したいが、スペースは増やしたくない」ならpre-lineが刺さります。
.address {
white-space: pre-line;
}注意点として、white-spaceは近年仕様が整理され、内部的にはwhite-space-collapseやtext-wrapの考え方と関係が深くなっています。とはいえ実務では、まずは上の代表値を覚えれば困りません。
5 要素同士の間隔を空けたいなら margin
見出しと本文の間、カード同士の間など、要素間の余白はmarginが基本です。
<h2 class="title">見出し</h2>
<p>本文が入ります。</p>
.title {
margin-bottom: 1.25rem;
}メリットは意図が明確で、再利用もしやすいこと。デメリットは、marginの相殺（マージンコラップス）など、文脈によって想定外の挙動が起きることがある点です。
ただし、最近はレイアウトをflexやgridで組む事が多く、margin相殺の出番は減りつつあります。困ったら「親をflexにする」「gapで統一する」が有効な逃げ道です。
6 ボタンや枠内の余白なら padding
押しやすいボタン、読みやすいカード。そこに効くのがpaddingです。要素の内側に余白を作ります。
<a class="btn" href="#">購入する</a>
.btn {
display: inline-block;
padding: 0.7em 1.1em;
}メリットはクリック領域を安全に広げられること。デメリットは、要素のサイズが意図より膨らむことがある点です。box-sizing: border-box;を基本にしておくと事故が減ります。
*,
*::before,
*::after {
box-sizing: border-box;
}7 繰り返し要素の間隔を揃えるなら gap
カード一覧、ボタン群、横並びのナビなど、繰り返し要素の「間」を揃えるならgapが最強です。
<div class="cards">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
.cards {
display: flex;
gap: 1.25rem;
}子要素にmarginを付ける方法でも可能ですが、最後の要素だけ余白が不要など、地味な条件分岐が増えがちです。gapなら親に1行で済みます。
デメリットは、古いブラウザを強く意識する現場だと確認が必要なこと。ただ2026年時点で、実務の多くは問題なく使えるケースがほとんどです。
やってはいけない スペース系のアンチパターン
連打でレイアウトを作る
一瞬だけ勝てます。次の改修で確実に負けます。余白の基準が変わった時に、全箇所を探して手で直す事になります。
<br>連打で余白を作る
改行は文章の意味のためにあります。余白のために使うと、スマホで行間が過剰になったり、読み上げで不自然になったりします。
全角スペースで整形する
ソースが読みにくい、検索や置換が難しい、意図が伝わらない。チーム開発では特に避けたいです。
2026年版 文章の読みやすさを底上げする追加CSS
ここからは「スペースの入れ方」から一歩進んで、日本語の読みやすさを底上げする話です。忙しい人ほど、ここを雑にしがちですが、丁寧にやると体感が変わります。
和文と欧文が混ざるなら text-autospace が効く
日本語の中に英数字が混ざると、視線が引っ掛かる事があります。例えば「HTMLスペース」「CSS gap」「100km」みたいなやつです。
そこでtext-autospaceです。CJKと非CJKの間にスペースを自動で入れる方向の制御ができます。
.prose {
text-autospace: normal;
}注意点は、比較的新しい機能であること。対象ブラウザや案件要件に合わせて、段階的に導入するのが安全です。
句読点やカッコの見た目を整える text-spacing-trim
日本語は約物（句読点、カッコ）を含むと、フォントによっては「なんか間が空いて見える」問題が起きます。そこでtext-spacing-trimです。
.prose {
text-spacing-trim: auto;
}これも新しめの領域なので、無理に必須化せず「効いたらラッキー」くらいで入れると良いです。ただ、文章主体のサイトほど差が出ます。
長いURLや英単語のはみ出し対策 overflow-wrap
スペース問題の裏ボスが「はみ出し」です。長いURL、長い英単語、長いID。SNS埋め込みや記事の引用で突然現れます。
.prose {
overflow-wrap: anywhere;
}メリットはレイアウト崩れを防げること。デメリットは、単語途中で折れるので読み味が落ちる場合があることです。本文よりも、カードUIや投稿本文など崩れを許容できない所に限定して使うのがコツです。
実務で迷わないための使い分け早見表
- 見た目の余白はCSSで作る margin padding gap
- 文章の中で改行させたくない空白は
- 文字間のデザイン調整はletter-spacing
- コードや整形済みテキストはpre または white-space: pre-wrap
- 長文の可読性改善は text-autospace や text-spacing-trim を検討
- はみ出し対策は overflow-wrap を検討
メリットとデメリットを正直にまとめる
スペース制御をCSSに寄せるメリット
- 後から一括で直せる
- 意図がコードに残る
- デザイン改修やレスポンシブに強い
スペース制御をCSSに寄せるデメリット
- HTMLだけ見ても最終見た目が分からない場面がある
- 案件によっては古いブラウザ要件の確認が必要
文字参照を使うメリット
- 文章の意味を保ちながら、局所的に整えられる
- 数値と単位など改行を防げる
文字参照を使うデメリット
- 多用すると修正がしんどい
- レイアウト目的だと破綻しやすい
最後に 使う人のためのひと手間が結局いちばん効く
スペース問題は、派手さはないです。でも現場では、こういう地味な所が品質の差になります。
「HTMLで空白を連打して整える」ではなく、「目的を決めて、適切な手段で制御する」。それだけで、あなたのコードは急に大人になります。
そして何より、後から触る自分が助かります。未来の自分に優しくしておくと、だいたい仕事はうまく回ります。
関連Tips ついでに入れておくと強い小技
フォームやUIで空白問題が出たら gap を第一候補にする
ボタン群、ラジオ、チェックボックスの並びは、子要素にmarginを配るよりgapの方が事故が少ないです。最後の要素だけ余白ゼロなどの条件分岐が消えます。
文章が詰まって見える時は line-height を疑う
スペースの悩みが、実は行間不足だったというケースは多いです。日本語本文なら line-height: 1.7 前後から試すと改善しやすいです。
.prose {
line-height: 1.7;
}どうしてもHTMLで空白を見せたいなら pre-wrap が便利
preだと横にはみ出すが、空白や改行は残したい。そんな時はwhite-space: pre-wrapが強いです。
.keep-format {
white-space: pre-wrap;
}
