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

Question

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

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

对

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

编辑澄清：

我们可以在this Fiddle中看到：

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

Answer 1

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>

Answer 2

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

即使只有换行符但没有 space 或缩进的代码在呈现时仍会显示 space。

示例：有换行符但没有换行符的代码 space:

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

由于换行，它们之间仍会呈现 1 个白色space 字符。您可以在 fiddle.

中验证这一点

通常，像这样的任何格式都由 CSS 处理。

MDN's explanation is about as good as any. The actual spec.

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

Html basics - Controls written in the same line vs different lines

html

user-interface

frontend

web-frontend

web