実行できるHTMLドキュメント: HTML 空白

Q: HTML でタブを入れるには？

整形済みテキスト以外では、HTML でタブは表示されません。 や white-space: pre を指定した要素の中ではタブ文字が残り、CSS の tab-size プロパティで幅を決められます。段落の字下げには CSS の text-indent や padding-inline-start を使います。

Q: と &emsp; の違いは何ですか？

は普通の空白と同じ幅です。&ensp; は 0.5em、&emsp; は 1em (フォントサイズと同じ幅) です。&ensp; と &emsp; もまとめられませんが、 と違ってそこで改行されることがあります。

HTML で空白を入れる

HTML で 2 つの単語の間に空白を 5 つ入力しても、ブラウザには 1 つしか表示されません。連続した空白、タブ、改行はすべて 1 つの空白にまとめられます。空白を増やすには、改行しない空白の文字参照   を空白 1 つにつき 1 回使います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spaces</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>Five typed spaces:     one shows.</p>
  <p>Five nbsp entities:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;five show.</p>
</body>
</html>

  はテキストの行の中で数個の空白を入れるのに向いています。もっと大きな間隔や要素の間の余白には、後で紹介する CSS を使いましょう。

の働き

  は改行しない空白 (文字 U+00A0) です。効果は 2 つあります。

まとめられないので、3 つ書けば 3 つの空白になります。
そこで改行されないので、両側の単語が離れません。

本来の役割は 2 つ目です。数値と単位、イニシャル、2 行に分かれると不自然な短い語句を   でつなぎます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Non-breaking space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 170px; border: 2px solid #e5e7eb; padding: 4px; }
    .nb { border-color: #16a34a; }
  </style>
</head>
<body>
  <p>The race is exactly 10 km long and starts at 9 am.</p>
  <p class="nb">The race is exactly 10&nbsp;km long and starts at 9&nbsp;am.</p>
</body>
</html>

グレーの箱では「10」と「km」が別の行に分かれます。緑の箱では分かれません。もっと長い範囲をまとめたいなら、文字参照を並べるより span に white-space: nowrap を指定するほうが簡単です。改行のページを参照してください。

幅の異なる空白の文字参照

HTML には、幅の広い空白や狭い空白を表す名前付きの文字があります。これらもまとめられないので、テキストの細かい間隔の調整に便利です。

文字参照	名前	幅
` `	ノーブレークスペース	普通の空白と同じ
`&ensp;`	En スペース	0.5em
`&emsp;`	Em スペース	1em (フォントサイズ)
` `	シンスペース	em の数分の 1 (フォントによる)
` `	狭いノーブレークスペース	細く、改行もしない

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space widths</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; }
    mark { background: #bfdbfe; }
  </style>
</head>
<body>
  <p>A<mark>&nbsp;</mark>B nbsp</p>
  <p>A<mark>&ensp;</mark>B ensp</p>
  <p>A<mark>&emsp;</mark>B emsp</p>
  <p>A<mark>&thinsp;</mark>B thinsp</p>
</body>
</html>

青いハイライトが各空白の幅を示しています。改行も止めるのは   と   だけです。

空白をすべて残す: pre と white-space

コード、アスキーアート、揃えた列、詩など、空白が内容の一部である場合は、文字参照を足すのではなく空白をすべて残します。<pre> 要素は初期状態でそうなり、CSS の white-space プロパティを使えばどの要素でも同じことができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; padding: 6px; margin-bottom: 8px; font-family: monospace; }
    .pre { white-space: pre; border-color: #2563eb; }
    .prewrap { white-space: pre-wrap; border-color: #f59e0b; }
  </style>
</head>
<body>
  <div>Name    Score
Ana     12</div>
  <div class="pre">Name    Score
Ana     12</div>
  <div class="prewrap">Name    Score
Ana     12</div>
  <pre>pre   keeps   spaces   too</pre>
</body>
</html>

`white-space` の値	空白	改行	長い行の折り返し
`normal` (初期値)	まとめる	空白になる	する
`nowrap`	まとめる	空白になる	しない
`pre`	残す	残す	しない
`pre-wrap`	残す	残す	する
`pre-line`	まとめる	残す	する

ユーザーのテキストには普通 pre-wrap が適しています。空白を残しつつ、狭い画面でも折り返します。pre は行をそのまま保ち、代わりにスクロールするかはみ出します。

タブも pre の中では残ります。幅は初期値で空白 8 つ分で、tab-size プロパティで変えられます (tab-size: 4)。

CSS で余白を作る

「ここに空白がほしい」と思う場面の多くは実はレイアウトの問題で、文字参照より CSS のほうがうまくできます。間隔が一定に保たれ、1 か所で変更できるからです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .icon { margin-inline-end: 12px; color: #2563eb; }
    .wide { letter-spacing: 0.3em; }
    .words { word-spacing: 1em; }
    .buttons { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <p><span class="icon">&#9733;</span>margin after an icon</p>
  <p class="wide">letter-spacing</p>
  <p class="words">word spacing between words</p>
  <div class="buttons"><button>One</button><button>Two</button><button>Three</button></div>
</body>
</html>

margin と padding は要素の間隔を、gap は flex や grid コンテナの項目の間隔を、letter-spacing と word-spacing はテキスト自体の間隔を空けます。段落の最初の行を字下げするには text-indent を使います。テキストの中央揃えのページで解説しています。

インライン要素の間の隙間

空白がまとめられることの裏返しで、2 つのインライン要素やインラインブロック要素の間の空白は、1 つの空白として残ります。ソースで 2 つのボタンの間に改行があると、その間に小さな隙間ができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline gap</title>
  <style>
    span { display: inline-block; width: 60px; height: 30px; background: #2563eb; }
    .flex { display: flex; margin-top: 8px; }
  </style>
</head>
<body>
  <div>
    <span></span>
    <span></span>
  </div>
  <div class="flex">
    <span></span>
    <span></span>
  </div>
</body>
</html>

1 組目には、ソースの改行による隙間があります。flex コンテナの中では項目の間の空白は無視されるので、2 組目はくっついています。間隔を正確に決めたいときは flex と gap を使いましょう。

よくある間違い

レイアウトのために   を並べる。 フォントや画面サイズが変わるとすぐに崩れます。margin、padding、gap を使いましょう。
余分な空白を入力して表示されると思う。 まとめられます。  か white-space: pre-wrap を使いましょう。
セミコロンなしで &nbsp と書く。 ブラウザは普通受け付けますが、無効で、場所によっては失敗します。必ず ; で終えましょう。
折り返しを防ぐためにあちこちで   を使う。 改行しないテキストが長く続くと、スマートフォンではみ出します。離れてはいけない部分だけをつなぎましょう。
空白で段落を字下げする。 CSS の text-indent を使いましょう。

よくある質問

HTML で空白を入れるには？

1 つの空白は入力したとおりに表示されますが、余分な空白は 1 つにまとめられます。増やしたいときは改行しない空白の文字参照   を空白 1 つにつき 1 回使います: a   b。レイアウトの間隔には CSS の margin、padding、gap を使いましょう。

HTML の   とは何ですか？

  は改行しない空白 (ノーブレークスペース) です。見た目は普通の空白と同じですが、ブラウザはそこで改行せず、まとめることもありません。10 km のような語句を離さずに保ち、空白を増やすのにも使えます。

HTML で空白が無視されるのはなぜですか？

HTML は空白をまとめます。連続した空白、タブ、改行は 1 つの空白として表示され、行の先頭と末尾の空白は取り除かれます。残したいときは  、<pre>、CSS の white-space プロパティを使います。

HTML でタブを入れるには？

整形済みテキスト以外では、HTML でタブは表示されません。<pre> や white-space: pre を指定した要素の中ではタブ文字が残り、CSS の tab-size プロパティで幅を決められます。段落の字下げには CSS の text-indent や padding-inline-start を使います。

  と &emsp; の違いは何ですか？

  は普通の空白と同じ幅です。&ensp; は 0.5em、&emsp; は 1em (フォントサイズと同じ幅) です。&ensp; と &emsp; もまとめられませんが、  と違ってそこで改行されることがあります。

HTML の空白・スペース:  、連続した空白、white-space