Почему браузер отображает новую строку как пробел? - PullRequest
61 голосов
/ 26 февраля 2009

Долгое время я хотел понять, почему браузер добавляет пустое пространство между отображаемыми элементами HTML, когда между ними есть NewLine, например:

<span>Hello</span><span>World</span>

Приведенный выше html выведет строку «HelloWorld» без пробела между «Hello» и «World», однако в следующем примере:

<span>Hello</span>
<span>World</span>

Приведенный выше html выведет строку «Hello World» с пробелом между «Hello» и «World».

Теперь у меня нет проблем с принятием того, что именно так и работает период, но меня немного беспокоит то, что у меня всегда было впечатление, что пробелы (или новые строки) между элементами HTML не имеют значения время, когда браузер отображал HTML пользователю.

Так что мой вопрос, знает ли кто-нибудь, в чем философская или техническая причина такого поведения.

Спасибо.

Ответы [ 5 ]

59 голосов
/ 26 февраля 2009

Браузеры при рендеринге уплотняют несколько пробельных символов (включая символы новой строки) в один пробел. Единственное исключение - элементы <pre> или элементы, у которых white-space 1004 * свойство CSS установлено pre или pre-wrap. (Или в XHTML, атрибут xml:space="preserve".)

49 голосов
/ 26 февраля 2009

Пробелы между элементами блока игнорируются. Однако пробелы между встроенными элементами преобразуются в одно пространство. Причина заключается в том, что встроенные элементы могут чередоваться с обычным внутренним текстом родительского элемента.

Рассмотрим следующий пример:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

В идеальном случае вы хотите, чтобы пользователь увидел

This is my colored Hello World example

Удаление пробела между двумя промежутками, однако, приведет к:

This is my colored HelloWorld example

Но тот же самый пример может быть переписан автором (с OCD о форматировании HTML :-)) как:

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

Было бы лучше, если бы это было сделано в соответствии с предыдущим примером.

12 голосов
/ 26 февраля 2009

HTML указан для этого:

Разрывы строк также являются пробелами

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1

1 голос
/ 26 февраля 2009

Если у вас есть символ «a» между двумя тегами, вы ожидаете, что он будет визуализирован. В этом случае у вас есть символ '\ n' между двумя тегами; поведение аналогичное и непротиворечивое ('\ n' отображается как один пробел).

0 голосов
/ 03 октября 2010

Браузеры ошибаются здесь:

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1

SGML (см. [ISO8879], раздел 7.6.1) указывает, что разрыв строки, следующий сразу за начальным тегом, должен игнорироваться, как и разрыв строки непосредственно перед конечным тегом. Это относится ко всем элементам HTML без исключения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...