Пробелы в HTML
Все, кто пытался создавать сайты на HTML сталкивались с такой проблемой. Почти все теги HTML вырезают лишние пробелы. И в этот раз я Вам приведу пример этой "вырезки", а также расскажу, как сделать так, чтобы пробелы не вырезались.
Давайте для начала напишем простой HTML-код:
<p>Некий текст Продолжение...</p>Если Вы посмотрите на результат, то увидите, что все наши пробелы были вырезаны и остался только один. И так делает почти каждый тег.
Существуют три варианта отображения дополнительных пробелов в HTML. Первый способ - это использование тега <pre>:
<pre><p>Некий текст Продолжение...</p></pre>В результате, Вы увидите, что пробелы остались, а именно этого мы и добивались.
Но есть и другой способ, который я использую регулярно - сущность " ". Данная сущность просто заменяет символ пробела:
<p>Некий текст Продолжение...</p>В результате, Вы также увидите целую череду пробелов. Для меня данный способ лучше тем, что не нужно использовать лишних тегов. Но это дело вкуса. Где нужен дополнительный пробел в HTML, просто вставляете " " и радуетесь результату.
И, наконец, последний способ - это использование CSS. Для этого Вам достаточно добавить такой стиль:
p {
white-space: pre;
}Данный способ самый быстрый и простой, однако, я его не использую, так как в моей практике встречается мало случаев, в которых мне приходится добавлять много подряд идущих пробелов. А если они и случаются, то использую сущность " " несколько раз. Вдобавок, свойство white-space поддерживается не всеми браузерами (в частности, IE6 и IE7 не поддерживают), что уже ограничивает область действия данного способа.
В общем, резюмирую:
1) Если у Вас какая-нибудь часть текста содержит много пробелов в разных местах, то используйте тег <pre>.
2) Если у Вас где-нибудь встречается одиночный момент, где нужно несколько пробелов подряд, то используйте сущность " ";
3) Если же у Вас вся страница соткана из кучи подряд идущих пробелов (хотя это бывает крайне редко), то используйте свойство white-space со значением pre.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 07.12.2010 10:41:18
-
Михаил Русаков
Комментарии (13):
Про css не понял куда его добавлять ??
Ответить
В отдельный CSS-файл, либо в теге <style> внутри тега <head>.
Ответить
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"/> <title>Телеканал ТНТ</title> </head> <body> <h1>Телеканал ТНТ</h1> </body> </html> Вроде всё сделал правильно, а название и заголовок не отображаются в результате.
Ответить
Все разобрался спс. Миша.
Ответить
Михаил, а как Вы относитесь к способу пробела  :
Ответить
лучший способ - css остальное не совсем валидно)
Ответить
Спасибо за подсказку
Ответить
Как сделать пробелы пробелы между ссылками?
Ответить
margin-left:10px или более и т.д.
Ответить
В какой отдельный файл - ничего еще не понимаю с CSS, не проходили же еще И почему то при первом способе с "pre" изменился сам шрифт и его размер меньше стал.
Ответить
Скажите, пожалуйста, зачем нужен тег <p>? Без него тоже всё работает.
Ответить
Про валидность не забывайте
Ответить
Тег <pre> поменял стиль шрифта и местоположение строки с текстом в браузере. Это точно не самый лучший вариант для дополнительных пробелов)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.