HTMLで空白（スペース）を入れる方法まとめ！特殊文字とCSSで解説！

Webページを作っていると「テキストの間に空白（スペース）を入れたい」と思うことがよくあります。

しかしHTMLでは、キーボードから入力した半角スペースや全角スペースが、ブラウザ上でそのままの形で反映されるとは限りません。

この記事では「HTMLで空白（スペース）を作る方法」について、以下の内容をサンプルコードや図を用いてわかりやすく解説します。

なぜHTMLで半角スペースは効かないのか？
特殊文字で空白（スペース）を入れる方法
-  は半角スペースではない？
CSSで空白（スペース）を入れる方法
white-spaceプロパティで空白（スペース）を入れる方法
全角スペースをHTMLに直接入力してはいけない理由

なぜHTMLで半角スペースは効かないのか？

「テキストの間に半角スペースを1つを入れたい」だけなら、キーボードの半角スペースでOKです。

しかし、問題は「複数の半角スペースを連続して入力しても、ブラウザ上では半角スペース1つ分しか表示されない」点です。例えば、HTMLのソースコードに半角スペースを3つ連続で書いたとしても、ブラウザで表示されるのは半角スペース1つ分だけです。

半角スペースが効かない理由

これはHTMLの仕様によるものです。

HTMLでは、インデント（字下げ）や可読性のために複数のスペースや改行を入れることがあります。もしそれらがすべて画面にそのまま反映されると、文章やレイアウトが崩れてしまいます。

そのため、HTMLではデフォルトでwhite-space: normalが適用され、次のようなルールになります。

複数の空白（スペース・タブ・改行）は、半角スペース1つにまとめられる
行頭やタグの前後にあるインデント用の空白は、無視される（表示されない）

つまり、意図的に複数の空白を作りたい場合は、以下の方法を使う必要があります。

意図的に空白を作る方法

 などの特殊文字を使う
CSSで余白（paddingやmargin）を指定する
CSSでwhite-space: preやwhite-space: pre-wrapを指定する

特殊文字で空白（スペース）を入れる方法

HTMLには「特殊文字（文字実体参照）」という仕組みがあります。これを利用すると、通常の半角スペースでは表現できない空白を挿入できます。

特殊文字は&〇〇;の形式で記述します。例えば、半角スペースの代わりには を使います。例として「Hello   World」と書けば、「Hello」と「World」の間に半角スペース3つ分の空白が入ります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>空白（スペース）の例</title>
  </head>
  <body>
    <h1>Hello   World</h1>
  </body>
</html>

ブラウザ表示結果

空白（スペース）を作る特殊文字は 以外だけでなく、 や&ensp;などがあります。空白（スペース）を作る特殊文字を以下に示します。

特殊文字	見た目のサイズ	説明
` `	半角スペースと同じ大きさ	ノンブレークスペース（改行しない空白）
` `	` `より小さい空白	ごく狭いスペースを入れたいときに使う
`&ensp;`	半角より少し広い空白	文章内の強調や調整に使う
`&emsp;`	全角スペースとほぼ同じ	日本語の全角スペース代わりに使う

 は半角スペースではない？

 の「nbsp」はnon-break-space（ノンブレークスペース）の略で、意味は「改行されないスペース」です。以下に示すように改行したくない箇所に使用します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>sample</title>
    <style>
      p {
        width: 110px; /* 横幅を狭くして折り返しを強制 */
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <p>商品価格は100 円です</p>
  </body>
</html>

横幅を110pxにしているため、本来なら「100」と「円」が別の行に分かれます。しかし、 を使ったことで「100」と「円」は同じ行に固定されるため、不自然な空白ができます。

 は半角スペースと同じ大きさの空白を作れますが、ただのスペースキーで入力する半角スペースとは意味が異なる点に気をつけてください。

CSSで空白（スペース）を入れる方法

実際のWeb開発では、特殊文字よりもCSSで余白（paddingやmargin）を指定して、空白（スペース）を入れる方法が推奨されています。

CSSで空白（スペース）を入れるメリット

任意の幅でスペースを作れる
レイアウト全体に一貫性を持たせやすい
他の要素とのバランスを調整しやすい

CSSで空白（スペース）を入れる手順

空白を入れたい部分を要素で囲む

まず、空白（スペース）を入れたい文字を<span>で囲みます。

今回はh1の中の「HTML入門」という文字の右側にスペースを入れたいので、以下のように書きます。

<h1><span>HTML入門</span>ようこそ</h1>

classを付けて余白を指定する

次に、<span>にclass名を付けます。「右側に余白を作る」という意味で、ここではspace-rightというクラスを使います。

<h1><span class="space-right">HTML入門</span>ようこそ</h1>

CSSで余白（paddingやmargin）を指定する

作ったクラスに対して、右側の余白を設定します。

.space-right {
  margin-right: 12px; /* 右側に12pxの余白 */
}

ブラウザ表示結果

「HTML入門」の右側にきちんと空白（スペース）が入りました。実際のWeb開発では、このように「余白用のクラス」を作っておき、再利用するケースが多いです。

white-spaceプロパティで空白（スペース）を入れる方法

HTMLではデフォルトでwhite-space: normalが適用されているため、複数のスペースや改行はまとめられてしまいます。しかし、CSSのwhite-spaceプロパティの値をpreやpre-wrapに変更すると、ソースコードに入力した空白や改行をそのまま表示することが可能です。

【補足】全角スペースをHTMLに直接入力してはいけない理由

キーボードで入力できる「全角スペース」をHTMLにそのまま書くのは避けた方が良いです。

理由を以下に示します。

全角スペースを直接入力してはいけない理由

文字として扱われる
- 全角スペースは「空白」ではなく「文字」として扱われます。そのため、レイアウト目的以外の場所（例えばタグ名や属性値の中）に紛れ込むと、HTMLの解釈エラーを引き起こす可能性があります。
検索や解析に悪影響
- 全角スペースは検索エンジン（Googleクローラーなど）や文字列解析ツールにとっては通常の文字扱いです。意図せず「別の文字」とみなされるため、検索精度やパース結果に悪影響を与える可能性があります。
スタイルが効かない
- レイアウト調整のために入力しても、ブラウザやフォントによって表示幅が異なることがあります。また、HTMLのタグや属性に混入すると「不正なコード」と解釈されて壊れるリスクがあります。