Как использовать неразрывный пробел в HTML для форматирования
Неправильные пробелы ломают визуальную структуру и читаемость: строки разрываются, текст съезжает и страницы выглядят «рвано». В статье разбираем приёмы управления расстояниями - неразрывный пробел, приёмы для длинных промежутков и практические фрагменты кода для верстки.
Вы разберётесь, какие варианты пробелов использовать в конкретных блоках и когда применять HTML‑символы вместо CSS. В результате получите рабочие сниппеты для вставки в проект и верстку без сбоев отображения.
Ставим пробел в html
В том, как поставить пробел в html, не должно возникнуть проблем, так как браузер интерпретирует его и выводит на экран, но только в том случае, если пробел между словами единичный. Сразу же следует вопрос: «Как сделать пробел в html, когда между словами необходимо поставить более одного пробела?».
В языке гипертекстовой разметки предусмотрены три варианта, как прописать пробел в html:
- &ensp – узкий пробел;
- &emsp – широкий пробел;
-   – неразрывный пробел.
Функциональность узкого и широкого пробела ясна из их названия. Рассмотрим html код пробела, который называют неразрывным.
Неразрывный пробел
Неразрывный пробел является одним из списка специальных символов html:
<p>Привет тебе я шлю!
С неразрывным пробелом!</p>
В названии специального символа содержится сокращение nbsp – от английского non-breaking space. Из названия следует, что это непереносимый пробел. Он не позволяет браузеру перенести (разделить) строку в месте применения. Отсюда и третье название – неделимый пробел:
Ниже приведены случаи, когда необходимо применять данную разновидность пробела:
- При написании инициалов и фамилии (Н.   В.   Гоголь);
- При сокращенном обращении (г-жа   Петрова);
- При обозначении параграфов (№  9);
- В написании версии программного продукта (android   4.4   kitkat);
- При написании многозначных чисел (3   231   821   байт).
Это далеко не полный список применения неразрывного пробела в местах, где того требует типография, а лишь основные пункты.
Длинный пробел в html
Что же делать, когда необходимо отобразить символ пробела в html длиной более одного стандартного?
Для решения данной задачи можно использовать длинный пробел (&emsp), о котором было упомянуто ранее. Но что, если нужно поставить пробел еще длиннее? Для этого используется неразрывный пробел html. Вставив специальный символ   несколько раз, друг за другом, можно получить пробел нужной длины.
Исходя из изложенного выше, можно сделать следующий вывод: чтобы отобразить знак пробела в html нужной длины, используются специальные символы: &ensp, &emsp,  . Нужно понимать, что для создания длинного неразрывного пробела между символами необходимо использовать  , иначе браузер может перенести символ, стоящий после пробела, на следующую строку.
Комментарии