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

Для создания пробелов в HTML можно использовать разные подходы, в зависимости от желаемого результата. Вот три основных способа:

1. Одинарный пробел ( ):

   • В HTML, как правило, один пробел между словами интерпретируется как один пробел при отображении.
   • Если нужно вставить несколько пробелов подряд, браузер отобразит только один.

2. Неразрывный пробел  :

   • Используйте   (non-breaking space) для вставки одного пробела, который не будет разрываться при переносе строки.
   • Это полезно, если нужно, чтобы два слова всегда оставались на одной строке.
   • Например: Слово1 `` `` Слово2 (три пробела между словами).

3. Тег <pre>:

   • Тег <pre>отображает текст с сохранением всех пробелов и переводов строк, как в исходном коде.
   • Используйте его, если нужно отобразить форматированный текст, например, фрагмент кода:

<pre>
  Этот текст 
  отобразится 
  с сохранением 
  всех пробелов.
</pre>

Какой способ выбрать?

• Одинарный пробел: Для обычного текста с одним пробелом между словами.
• Неразрывный пробел: Для неразрывных пробелов или нескольких пробелов подряд.
• Тег <pre>: Для форматированного текста с сохранением всех пробелов и переносов строк.

Для создания пробела в HTML внутри строки можно использовать символ пробела -   или элемент <pre>.

Символ пробела   - это специальный символ, который используется в HTML для создания неразрывных пробелов между словами. Для создания одного пробела необходимо написать  , а для создания нескольких пробелов - несколько раз повторить этот символ.

Пример использования символа пробела:

<p>Это текст, в котором есть&nbsp;пробелы&nbsp;между&nbsp;словами.</p>

Элемент <pre> - это предварительно отформатированный текст, в котором пробелы и переносы строк сохраняются. Этот элемент удобен для отображения кода, таблиц и других элементов, где важно сохранить форматирование.

Пример использования элемента <pre>:

<pre>
Это  текст, в котором есть
    пробелы
        и отступы
</pre>

Здесь упоминается еще несколько способов.

GOAT. Diko

Браузер схлопывает несколько пробелов подряд в один. Чтобы поставить дополнительный пробел, используйте мнемонику   — неразрывный пробел:

<p>Слово&nbsp;&nbsp;&nbsp;слово</p>

Каждый   добавляет один пробел. Точка с запятой в конце обязательна.

Почему обычные пробелы пропадают

В HTML пробелы, табы и переносы строк между словами браузер показывает как один пробел. Код

<p>Привет       мир</p>

выведет Привет мир. Поэтому отступы в HTML-коде не влияют на вид страницы.

Коды пробелов

Неразрывный пробел

  запрещает перенос строки в этом месте. Его ставят, чтобы не отрывать:

• инициалы от фамилии: А. С. Пушкин;
• число от единицы: 100 ₽, 5 кг;
• короткие предлоги от следующего слова: в Москве.

Сохранить все пробелы через CSS

Если в тексте много пробелов, проще отключить схлопывание:

<p style="white-space: pre;">Имя:     Анна
Возраст:  28</p>

Для кода используют тег <pre>: внутри него пробелы и переносы сохраняются без CSS.

Отступы делают через CSS

Ряды   для выравнивания ломаются на других экранах и шрифтах. Отступ задают свойствами:

.label {
  margin-right: 12px;   /* отступ справа от элемента */
}

p {
  text-indent: 2em;     /* красная строка */
}

Пробелы между элементами во флекс- и грид-контейнерах задают свойством gap.

Текст, отступы и white-space разбирают на курсе «Профессиональная верстка».