Html 为什么浏览器将换行符呈现为空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/588356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does the browser renders a newline as space?
提问by Rene
For the longest time, I have wanted to understand why the browser adds an empty space between rendered HTML elements when there is a NewLine between them, for example:
很长一段时间以来，我一直想了解为什么浏览器在渲染的 HTML 元素之间添加了一个空格，而它们之间有一个 NewLine，例如：
<span>Hello</span><span>World</span>
The html above will output the “HelloWorld” string withouta space between “Hello” and “World”, however in the following example:
上面的 html 将输出“HelloWorld”字符串，“Hello”和“World”之间没有空格，但是在以下示例中：
<span>Hello</span>
<span>World</span>
The html above will output a “Hello World” string witha space between “Hello” and “World”.
上面的 html 将输出一个“Hello World”字符串，在“Hello”和“World”之间有一个空格。
Now, I have no problem accepting that this is just the way it works period, but the thing that bugs me a little is that I was always under the impression that spaces (or newlines) between the html elements would not matter at the time when the browser rendered the html to the user.
现在，我可以毫无疑问地接受这只是它的工作方式期间，但让我有点烦恼的是我总是认为 html 元素之间的空格（或换行符）在当时并不重要浏览器将 html 呈现给用户。
So my question is if anyone knows what the philosophical or technical reason behind this behavior.
所以我的问题是，是否有人知道这种行为背后的哲学或技术原因。
Thank you.
谢谢你。
回答by David Z
Browsers condense multiple whitespace characters (including newlines) to a single space when rendering. The only exception is within <pre>elements or those that have the CSS property white-spaceset to preor pre-wrapset. (Or in XHTML, the xml:space="preserve"attribute.)
浏览器在渲染时将多个空白字符（包括换行符）压缩为一个空格。唯一的例外是在<pre>元素内或那些将CSS 属性white-space设置为pre或pre-wrap设置的元素。（或在 XHTML 中，xml:space="preserve"属性。）
回答by Franci Penov
Whitespace between block elements are ignored. However, whitespaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element.
块元素之间的空白被忽略。但是，内联元素之间的空格被转换为一个空格。原因是内联元素可能散布着父元素的常规内部文本。
Consider the following example:
考虑以下示例：
<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>
In the ideal case, you want the user to see
在理想情况下，您希望用户看到
This is my colored Hello World example
Removing the whitespace between the two spans however would result in:
但是，删除两个跨度之间的空格会导致：
This is my colored HelloWorld example
But that same sample can be rewritten by an author (with OCD about the HTML formatting :-)) as:
但是同样的示例可以由作者重写（使用关于 HTML 格式的 OCD :-)）为：
<p>
This is my colored
<span class="red_text">Hello</span>
<span class="blue_text">World</span>
example
</p>
It would be better if this was rendered consistently with the previous example.
如果这与前面的示例一致呈现会更好。
回答by webjunkie
HTML is specified to do it like that:
HTML被指定为这样做：
Line breaks are also white space characters
换行符也是空白字符
回答by SquareCog
If you had the character 'a' between two tags, you would expect it to get rendered. In this case, you have a character '\n' between two tags; the behaviour is analogous, and consistent ('\n' is rendered as a single whitespace).
如果您在两个标签之间有字符 'a'，您会期望它被渲染。在这种情况下，两个标签之间有一个字符“\n”；行为类似且一致（'\n' 呈现为单个空格）。
回答by Zhang Qun
you can use the html comment tag to connect the code to avoid the space.
可以使用html注释标签来连接代码，避免空格。
<p>
This is my
<span class="red_text">Hello</span><!--
--><span class="blue_text">World</span>
example
</p>
回答by Thomas Müller
Browsers make a mistake here:
浏览器在这里犯了一个错误：
http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1
http://www.w3.org/TR/html4/appendix/notes.html#hB.3.1
SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.
SGML（参见 [ISO8879]，第 7.6.1 节）规定必须忽略紧跟在开始标记之后的换行符，就像紧接在结束标记之前的换行符一样。这无一例外地适用于所有 HTML 元素。
