Исполняемые доки HTML: Пробел в HTML

Q: Чем отличается от &emsp;?

шириной с обычный пробел. &ensp; шириной в половину em, а &emsp; в один em (ширина, равная размеру шрифта). &ensp; и &emsp; не схлопываются, но, в отличие от , строка на них все же может переноситься.

Как добавить пробелы в HTML

Напишите пять пробелов между двумя словами в HTML, и браузер покажет один. Любая серия пробелов, табуляций и переносов строк схлопывается в один пробел. Чтобы добавить лишние пробелы, используйте сущность неразрывного пробела  , по одной на каждый пробел:

<!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). У него два эффекта:

Он никогда не схлопывается, поэтому три таких символа дают три пробела.
Строка на нем никогда не переносится, поэтому слова по обе стороны остаются вместе.

Второе и есть его настоящая работа. Числа и единицы измерения, инициалы и короткие фразы, которые плохо смотрятся разорванными на две строки, соединяют через  :

<!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	Половина em
`&emsp;`	Пробел em	Один em (размер шрифта)
` `	Тонкий пробел	Доля em, зависит от шрифта
` `	Узкий неразрывный пробел	Тонкий и без переноса строки

<!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

Когда пробелы являются частью содержимого (код, ASCII-графика, выровненные столбцы, стихи), сохраните все пробельные символы, а не добавляйте сущности. Элемент <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 справляется с этим лучше сущностей: промежуток остается одинаковым и меняется в одном месте:

<!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, о котором рассказывает страница выравнивание текста по центру.

Промежуток между строчными элементами

Обратная сторона схлопывания: пробельные символы между двумя строчными или inline-block элементами все равно считаются одним пробелом. Перенос строки между двумя кнопками в исходном коде ставит между ними небольшой промежуток:

<!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>

У первой пары есть промежуток из-за переноса строки в исходном коде. Во flex-контейнере пробелы между элементами игнорируются, поэтому вторая пара соприкасается. Используйте flex и gap, когда нужно точно управлять расстоянием.

Частые ошибки

Цепочки   для раскладки. Они ломаются, как только меняется шрифт или размер экрана. Используйте margin, padding или gap.
Лишние пробелы в надежде, что они появятся. Они схлопываются. Используйте   или white-space: pre-wrap.
&nbsp без точки с запятой. Браузеры обычно его принимают, но это некорректно и в некоторых местах не работает. Всегда заканчивайте на ;.
  повсюду, чтобы запретить перенос. Длинный неразрывный фрагмент вылезает за экран на телефонах. Соединяйте только то, что обязано оставаться вместе.
Отступ абзаца пробелами. Используйте text-indent в CSS.

Часто задаваемые вопросы

Как сделать пробел в HTML?

Один пробел работает как написан, но лишние пробелы схлопываются в один. Чтобы добавить больше, используйте сущность неразрывного пробела  , по одной на пробел: a   b. Для промежутков в раскладке используйте CSS margin, padding или gap.

Что означает   в HTML?

  это неразрывный пробел. Он выглядит как обычный пробел, но браузер никогда не переносит на нем строку и никогда его не схлопывает, поэтому он удерживает вместе слова вроде 10 km и позволяет добавлять лишние пробелы.

Почему HTML игнорирует мои пробелы?

HTML схлопывает пробельные символы: любая серия пробелов, табуляций и переносов строк показывается как один пробел, а пробелы в начале и конце строки удаляются. Чтобы их сохранить, используйте  , <pre> или CSS-свойство white-space.

Как сделать табуляцию в HTML?

Вне предварительно отформатированного текста видимой табуляции в HTML нет. Внутри <pre> или элемента с white-space: pre символ табуляции сохраняется, а CSS-свойство tab-size задает его ширину. Для отступа абзаца используйте в CSS text-indent или padding-inline-start.

Чем   отличается от &emsp;?

  шириной с обычный пробел. &ensp; шириной в половину em, а &emsp; в один em (ширина, равная размеру шрифта). &ensp; и &emsp; не схлопываются, но, в отличие от  , строка на них все же может переноситься.

Связанные концепции

Пробел в HTML:  , несколько пробелов и white-space