html-为什么浏览器将换行符呈现为空格?

最长的时间,我一直想了解为什么浏览器在呈现的HTML元素之间存在换行符时在它们之间添加空白区域,例如:

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

上面的html将输出“ HelloWorld”字符串,在“ Hello”和“ World”之间没有空格,但是在以下示例中:

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

上面的html将输出“ Hello World”字符串,在“ Hello”和“ World”之间有一个空格。

现在,我可以毫无疑问地接受这只是工作周期的方式,但是令我有些烦恼的是,我总是觉得html元素之间的空格(或换行符)在何时不重要。 浏览器将html呈现给用户。

所以我的问题是,是否有人知道这种行为背后的哲学或技术原因。

谢谢。

Rene asked 2019-10-08T17:25:42Z
5个解决方案
56 votes

呈现时,浏览器将多个空格字符(包括换行符)压缩为一个空格。 唯一的例外是white-space元素或CSS属性white-space设置为prepre-wrap的元素。 (或在XHTML中为xml:space="preserve"属性。)

David Z answered 2019-10-08T17:25:55Z
49 votes

块元素之间的空白将被忽略。 但是,内联元素之间的空白将转换为一个空间。 原因是内联元素可能散布在父元素的常规内部文本中。

考虑以下示例:

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

如果将它与前面的示例保持一致会更好。

Franci Penov answered 2019-10-08T17:26:51Z
12 votes

HTML被指定为这样做:

换行符也是空格字符

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

webjunkie answered 2019-10-08T17:27:27Z
1 votes

如果在两个标签之间有字符“ a”,则希望它被渲染。 在这种情况下,两个标签之间有一个字符“ \ n”; 行为类似且一致('\ n'呈现为单个空格)。

SquareCog answered 2019-10-08T17:27:53Z
-1 votes

浏览器在这里犯了一个错误:

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

SGML(请参见[ISO8879],第7.6.1节)指定必须忽略紧接在开始标记之后的换行符,也必须忽略紧接在结束标记之前的换行符。 这毫无例外地适用于所有HTML元素。

Thomas Müller answered 2019-10-08T17:28:32Z
translate from https://stackoverflow.com:/questions/588356/why-does-the-browser-renders-a-newline-as-space