Создать пробелы и физическое разделение элементов в HTML с помощью CSS
Создание пробелов и физическое разделение элементов в HTML может быть трудным для понимания начинающим веб-дизайнером. Это связано с тем, что у HTML есть свойство, известное как «разрушение пробелов». Независимо от того, вводите ли вы пробел 1 или 100 в своем HTML-коде, веб-браузер автоматически сворачивает эти пробелы в один пробел. Это отличается от программы, подобной Microsoft Word, которая позволяет создателям документов добавлять несколько пробелов для разделения слов и других элементов этого документа. Это не так, как работает дизайн сайта.
Итак, как вы добавляете пробелы в HTML, которые появляются на созданной вами веб-странице? В этой статье рассматриваются некоторые из разных способов.
Пробелы в HTML с помощью CSS
Предпочтительный способ добавить пробелы в ваш HTML – это каскадные таблицы стилей (CSS). CSS должен использоваться для добавления любых визуальных аспектов веб-страницы, и поскольку интервалы являются частью характеристик визуального дизайна страницы, CSS – это то место, где вы хотите, чтобы это было сделано.
В CSS вы можете использовать свойства margin или padding, чтобы добавить пространство вокруг элементов. Кроме того, свойство text-indent добавляет пространство в начале текста, например, для отступа абзацев.
Вот пример того, как использовать CSS, чтобы добавить пространство перед всеми вашими абзацами. Добавьте следующий CSS к вашей внешней или внутренней таблице стилей:
p {
текстовый отступ: 3em;
}
Пробелы в HTML внутри вашего текста
Если вы просто хотите добавить один или два дополнительных пробела к вашему тексту, вы можете использовать неразрывный пробел. Этот символ действует как стандартный символ пробела, только он не разрушается внутри браузера.
Вот пример того, как добавить пять пробелов внутри строки текста:
Этот текст содержит пять лишних пробелов внутри
Использует HTML:
Этот текст имеет & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; пять дополнительных пробелов внутри него
Вы также можете использовать тег
для добавления дополнительных разрывов строк.
Это предложение имеет пять разрывов строк в конце
Почему интервалы в HTML – плохая идея
Хотя обе эти опции работают – элемент неразрывных пробелов действительно добавит интервалы к вашему тексту, а разрывы строк добавят интервалы под абзацем, показанным выше – это не лучший способ создания интервалов на вашей веб-странице. Добавление этих элементов в ваш HTML добавляет визуальную информацию в код, а не отделяет структуру страницы (HTML) от визуальных стилей (CSS). Лучшие практики требуют, чтобы они были отдельными по ряду причин, включая простоту обновления в будущем и общий размер файла и производительность страницы.
Если вы используете внешнюю таблицу стилей для определения всех ваших стилей и интервалов, то легко изменить эти стили для всего сайта, поскольку вам просто нужно обновить эту одну таблицу стилей.
Рассмотрим приведенный выше пример предложения с пятью тегами в конце. Если вы хотите, чтобы такой интервал находился внизу каждого абзаца, вам нужно будет добавить этот HTML-код в каждый абзац всего сайта. Это достаточное количество дополнительной разметки, которая раздувает ваши страницы. Кроме того, если в будущем вы решите, что этот интервал слишком велик или слишком мал, и вы хотите немного его изменить, вам нужно будет отредактировать каждый абзац на всем сайте. Нет, спасибо!
Вместо добавления этих элементов-интервалов в ваш код используйте CSS.
p {
padding-bottom: 20px;
}
Эта одна строка CSS добавит пробелы под абзацами вашей страницы. Если вы хотите изменить этот интервал в будущем, отредактируйте эту строку (вместо кода всего сайта), и все готово!
Теперь, если вам нужно добавить один пробел в одной части вашего веб-сайта, использование тега
или одного неразрывного пробела – это не конец света, но вы должны быть осторожны. Использование этих встроенных параметров HTML-интервала может быть скользким. Хотя один или два могут не повредить вашему сайту, если вы продолжите идти по этому пути, вы будете создавать проблемы на своих страницах. В конце концов, вам лучше обратиться к CSS для разметки HTML и ко всем остальным визуальным потребностям веб-страниц.
