Html 基础 - 在同一行与不同行编写的控件答案

【问题标题】：Html basics - Controls written in the same line vs different linesHtml 基础 - 在同一行与不同行编写的控件
【发布时间】：2020-07-12 14:54:31
【问题描述】：

为什么这两个代码块呈现的不同？

<button>text1</button>
<button>text2</button>

对

<button>text1</button><button>text2</button>

为澄清而编辑：

我们可以在this Fiddle看到：

在不同的行中编写控件会在它们之间添加一个空白（控制台检查无法到达此空白，但可以清楚地看到）
在同一行中编写控件不会。

【问题讨论】：

HTML 与空白无关。绝对没有理由会以不同的方式呈现这两者。所有渲染引擎关心的是标签的层次结构，它用于构建内容树。 HTML 解析不会以常规的从上到下的方式进行。这是一个可重入算法。任何位置明智的事情都将由 CSS 处理或隐含元素的默认样式。完整的解析算法规范可在此处获得：html.spec.whatwg.org/multipage/parsing.html
@sinanspd 没关系。但是请检查小提琴，看看这些块渲染有什么不同。
请看这里：stackoverflow.com/questions/24615355/…
谢谢@sinanspd。但我认为这个问题与我的不同。我编辑了问题以进行澄清。

标签： html user-interface web frontend web-frontend

【解决方案1】：

这是因为浏览器在<pre> 标记等特殊情况之外没有换行符或制表符的概念，因此无论在哪里找到它们，它都会将它们转换为空格。请记住，它将忽略除第一个之外的所有空格、换行符和制表符。您的代码中可以有 30 个连续的换行符和 100 个空格，但它会在浏览器中呈现为 1 个空格。

即使只有换行符但没有空格或缩进的代码在渲染时仍会显示空格。

示例：带有换行符但没有空格的代码：

    <button>text1</button>
<button>text2</button>

由于换行，它仍然会在它们之间呈现 1 个空白字符。您可以在小提琴中验证这一点。

通常任何类型的格式都由 CSS 处理。

MDN's explanation 几乎和任何一个一样好。实际的spec。

【讨论】：

你说得对，正如你所说的那样有效。您是否在任何官方文档中阅读过它？如果你能提到它，这个答案就是一个。谢谢！！
好点，我更新了我的答案。我想是因为我很久以前就通过反复试验艰难地学会了这一点，很久以前我没有想到要链接到参考资料。

【解决方案2】：

HTML 中的“EOL”你必须告诉它，试着把<br> 放在按钮之间。

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>Case 1</h1>
    <button>text1</button>
    <br>
    <button>text2</button>


    <h1>Case 2</h1>
    <button>text1</button>
    <br>
    <button>text2</button>

  </body>
</html>

【讨论】：

好的，但我不是在谈论 html 换行符。我的观点是为什么假设 HTML 与空白无关时这两个块呈现不同。
</br> 无效。哪有这回事。这是<br>