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位）]。这两个输入之间有一些空间！似乎浏览器将新行转换为空格。但即便如此也是如此，因为如果你在源代码中的输入之间创建了多个新行，那么空间仍然只是一个空格！

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

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

...谢谢

Answer 1

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

并且也不包括“＆lt;”之间的空格和“输入”。

如果您想在两个不同的行中使用这些内容，只需在首次输入后添加<br/>即可。

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

Answer 2

问题是正在渲染两个输入之间的空白区域。输入之间的任何空白区域（换行符，制表符，空格）将由浏览器呈现为单个空格。要解决此问题，您可以在父元素上将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 3

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

此外，如果您想要制作多个空格，可以使用 来表示空格。

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

3 个答案: