То, как браузеры обрабатывают пустое пространство, сначала не очень интуитивно понятно, особенно если вы сравните, как язык гипертекстовой разметки обрабатывает пустое пространство по сравнению с программами обработки текста. В текстовом редакторе вы можете добавить много интервалов или табуляций в документ, и этот интервал будет отражен при отображении содержимого документа. Этот WYSIWYG-дизайн не подходит для HTML или веб-страниц.
Интервал в печати
В текстовых редакторах три основных символа пробела - это космос, вкладка, а также возврат каретки. Каждый из этих символов действует по-своему, но в HTML браузеры отображают их все одинаково. Независимо от того, размещаете ли вы в своем Разметка HTML или смешайте ваш интервал с табуляцией и возвратом каретки, все они будут сжаты до одного пробела, когда страница будет отображаться браузер. В терминологии веб-дизайна это известно как коллапс белого пространства. Вы не можете использовать эти типичные пробелы для добавления пробелов на веб-странице, потому что браузер сворачивает повторяющиеся пробелы только в одно пространство при отображении в браузере,
Использование CSS для создания HTML-табуляции и интервалов
Сегодняшние веб-сайты строятся с разделением структуры и стиля. Структура страницы обрабатывается HTML, а стиль определяется каскадными таблицами стилей. Чтобы создать интервал или добиться определенного макета, используйте CSS вместо добавления символов интервала в HTML-код.
Если вы пытаетесь использовать вкладки для создания столбцов текста вместо этого используйте
Если данные, которые вы выкладываете, являются табличными, используйте таблицы для выравнивания этих данных по своему усмотрению. Таблицы часто получают плохую репутацию в веб-дизайне, потому что в течение многих лет ими злоупотребляли как чистые инструменты компоновки, но таблицы по-прежнему вполне действительны, если ваш контент содержит действительно табличные данные.
Поля, отступы и отступ для текста
Наиболее распространенные способы создания интервалов с помощью CSS - использование одного из следующих стилей CSS:
- поле
- набивка
- отступ текста
Например, сделайте отступ для первой строки абзаца, как табуляция, с помощью следующего CSS (обратите внимание, что это предполагает, что ваш абзац имеет атрибут класса "first", прикрепленный к нему):
p.first {
текстовый отступ: 5em;
}
Этот абзац имеет отступ примерно в пять символов.
Используйте свойства поля или заполнения в CSS для добавления интервала сверху, снизу, слева или справа (или комбинации этих сторон) элемента. Добейтесь любого необходимого интервала, обратившись к CSS.
Перемещение текста более чем на одно пространство без CSS
Если все, что вам нужно, это чтобы ваш текст был перемещен более чем на один пробел от предыдущего элемента, используйте неразрывный пробел.
Чтобы использовать неразрывный пробел, вы добавляете столько раз, сколько вам нужно в разметке HTML.
HTML уважает эти неразрывные пробелы и не сворачивает их в один пробел. Однако такой подход считается плохой практикой, поскольку он добавляет дополнительную HTML-разметку в документ только для удовлетворения потребностей в макете. По возможности избегайте добавления неразрывных пробелов просто для достижения желаемого эффекта макета и используйте Поля и отступы CSS вместо.