如何防止在 html 代码中显示空格

Question

假设我们有相同的 2 个输入标签，但在 html 代码中有以下差异：

示例 1

<input type="text" id="v1" value="value 1"><input type="text" id="v2" value="value 2">

示例 2

<input type="text" id="v1" value="value 1">

<input type="text" id="v2" value="value 2">

这两个示例产生不同的输出，至少在我的 PC 和我的浏览器上是 Chrome [版本 52.0.2743.116 m（64 位）]。这两个输入之间有某种 space ！好像浏览器将新行转换为 space。但即使这样也不是真的，因为如果你在 source 中的输入之间创建了不止一个新行，那么 space 仍然只是一个 space!

有谁知道为什么会这样吗？？？

如果是，请说明您使用的浏览器（和版本）。哦，是的，john_h was kind to make this fiddle

上的代码

谢谢...

Answer 1

我相信当浏览器呈现您的网站时，它不会将 /r/n（这导致文件 1 中的新行）视为新行，而是将 /r/n 呈现为white-space（你使用<br />来处理一个新行）。

另外，如果要制作多个space，则用 代表一个space。

Answer 2

这些应该在浏览器中产生相同的外观，如果你有一个 link 到一个 fiddle，你可以发送它或者你可以看看这个：https://jsfiddle.net/john_h/0mz8afyd/1/

您可能遇到的一件事是没有关闭标签。例如，这个：

< input type="text" id="v1" value="value 1" >

< input type="text" id="v2" value="value 2" >

与此不同：

<input type="text" id="v1" value="value 1" />

<input type="text" id="v2" value="value 2" />

并且不包括“<”和 "input" 之间的空格。

如果您希望将它们放在两行 不同的 行中，只需在您的第一个输入后添加一个 <br/>。

<input type="text" id="v1" value="value 1" />
<br/>
<input type="text" id="v2" value="value 2" />

Answer 3

问题是正在渲染两个输入之间的白色-space。输入之间的任何白色 space（换行符、制表符、spaces）将被浏览器呈现为单个 space。要解决此问题，您可以在父元素上将字体大小设置为 0。

例如：

<div class="block">

<input type="text" id="v1" value="value 1"><input type="text" id="v2"value="value 2">
<input type="text" id="v1" value="value 1">

<input type="text" id="v2" value="value 2">
</div>

CSS:

 .block {
 font-size: 0;
 }

这将显示您添加到父元素的任何输入之间没有 spaces，因为字体大小设置为零。希望我能够澄清你的疑惑。谢谢

如何防止在 html 代码中显示空格

how to prevent displaying spaces in html code

html

input

spaces