如何防止HTML代码显示空间

Question

比方说，我们有在HTML代码中的以下区别相同的2个输入标签：

例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和我的浏览器是铬[版本52.0.2743.116米（64位）]上。这两个输入之间有一些空间！看起来好像浏览器将新行转换为空格。但即便如此，如果你在源代码中的输入之间建立了多条新线路，空间仍然只是一个空间！

有谁知道这是为什么？

如果是这样，请说明您使用的浏览器（和版本）。哦，是的，john_h是那种使this代码上拨弄

谢谢...

Answer 1

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

For e。G：

<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; 
} 

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

Answer 2

相信渲染你的网站时，浏览器，它不考虑/ R/N（这会导致新线文件1）作为新行，而是将/ r/n渲染为空白（并且您使用<br />来处理新行）。

另外，如果要制作多个空格，则使用 来表示空格。

Answer 3

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