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