如何防止在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 位）] 上。这两个输入之间有某种空间！似乎浏览器将新行转换为空格。但即使这样也不是真的，因为如果你在 source 中的输入之间创建不止一个新行，那么空格仍然只是一个空格！

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

如果是，请说明您使用的浏览器（和版本）。哦，是的，john_h 很乐意在小提琴上制作this 代码

谢谢...

Answer 1

问题在于两个输入之间的空白正在被渲染。输入之间的任何空格（换行符、制表符、空格）都将被浏览器呈现为单个空格。要解决此问题，您可以在父元素上将 font-size 设置为 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;
 }

这将显示您添加到父元素中的任何输入之间没有空格，因为 font-size 设置为零。希望我能够澄清你的疑问。谢谢。

Answer 2

这些应该在浏览器中产生相同的外观，如果你有一个指向小提琴的链接，你可以发送它或者你可以看看这个：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" />

也不包括“

如果您希望这些在两个不同行中，只需在第一次输入后添加<br/>。

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

Answer 3

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

另外，如果您想制作多个空格，请使用  表示一个空格。