Почему браузер отображает новую строку как пространство?

В течение самого долгого времени я хотел понять, почему браузер добавляет пустое пространство между визуализированными 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 пользователю.

Итак, мой вопрос в том, знает ли кто, какая философская или техническая причина этого поведения.

Спасибо.

Ответ 1

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

Ответ 2

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

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

<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>

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

Ответ 3

HTML задается так:

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

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

Ответ 4

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

Ответ 5

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

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

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