В течение самого долгого времени я хотел понять, почему браузер добавляет пустое пространство между визуализированными 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 пользователю.
Итак, мой вопрос в том, знает ли кто, какая философская или техническая причина этого поведения.
Спасибо.
Браузеры конденсируют несколько пробельных символов (включая символы новой строки) в единое пространство при рендеринге. Единственным исключением является элемент <pre> или те, у которых свойство CSS white-space установлено на pre или pre-wrap. (Или в XHTML, атрибут xml:space="preserve".)
Пробелы между элементами блока игнорируются. Однако пробелы между встроенными элементами преобразуются в одно пространство. Причиной является то, что встроенные элементы могут быть перемежены с регулярным внутренним текстом родительского элемента.
Рассмотрим следующий пример:
<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>
Было бы лучше, если бы это было показано последовательно с предыдущим примером.
HTML задается так:
Разрывы строк также являются символами пробела
Если у вас есть символ "a" между двумя тегами, вы ожидаете, что он будет отображаться. В этом случае у вас есть символ "\n" между двумя тегами; поведение аналогично и согласовано ('\n' отображается как одиночное пробельное пространство).
Браузеры делают ошибку здесь:
http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1
SGML (см. [ISO8879], раздел 7.6.1) указывает, что прерывание строки сразу после стартового тега должно игнорироваться, так как строка должна прерываться непосредственно перед конечным тегом. Это относится ко всем элементам HTML без исключения.