Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
26.05.2015

Пробел в HTML

Бывают случаи, когда не хочется менять стили ради какого-то одного элемента, или необходимо вставить несколько пробелов в тексте из соображений эстетики или стилистики форматирования текста. И тут встает вопрос: «Как сделать пробел в HTML, чтобы текст красиво отображался, и при этом избежать избыточности кода?» Для этого рассмотрим виды пробелов и примеры их использования в HTML-коде.

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

В случаях, когда нужно не отрывать части текста друг от друга, поможет неразрывный пробел, код которого выглядит следующим образом:

 

Это так называемый, "non breaking space".

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

и т. д.
 т. к.
Е. Велтистов
11 тыс. рублей

Тонкий пробел

Код пробела HTML, который мы рассмотрели выше, является повсеместным. Но бывают случаи, когда обычный пробел оказывается слишком «большим». Тогда на смену ему приходит тонкий пробел. Это пробел, ширина которого составляет четверть кегля используемого шрифта. Обозначается тонкий пробел следующим образом:

 

и используется, по большей части, для разбиения разрядов чисел, например, "15 000 000 долларов" стоит записать так:

15 000 000 долларов

Примечание: Тонкий пробел может некорректно отображаться в старых версиях некоторых из браузеров, но во всех последних версиях работает на «ура».

Другие типы пробелов в языке HTML

Помимо наиболее актуальных видов, что мы рассмотрели выше, существуют и другие.

  •   - пробел длины буквы N;
  •   - пробел длины буквы M;
  • ‌ - несоединяющий символ нулевой длины;
  • ‍ - соединяющий символ нулевой длины.

Примечание: Если вам нужно поставить несколько пробелов подряд, обрамите текст тегом <pre>:

<pre>Конструктор сайтов        «Нубекс»</pre>

Пробел при помощи CSS

Вариант создания табуляции (отступа) с помощью CSS можно решить с помощью следующего приёма:

<span style="padding: 0px 20px;">&nbsp;</span>Конструктор сайтов «Нубекс»