HTML中的新行

我很好奇浏览器如何解释HTML中的换行符，以及如何将其转换为呈现标记中的空白。例如，考虑以下两个div：

<div>
    <select>
        <option>one</option>
    </select>
    <input />
</div>
<div>
    <select>
        <option>one</option>
    </select><input />
</div>

一
一

---

第一个div在select和input元素之间有更多的空白，因为它们之间的换行符被渲染为空白；看到。我很好奇这背后的原因，以及在保持可读HTML的同时避免额外空格的最佳方法是什么，因为我觉得第二个div不是很可读。

HTML中的任何空白，包括40个空字符，都将被解释为一个

'

字符。因此，换行符和500个空格仍将显示为一个空格。避免间距的最佳方法是使用css：

select{float:left}

---

如果在HTML源代码的两个HTML元素之间出现至少一个空格字符，浏览器将在DOM中的这两个元素之间创建一个TextNode。是的，浮动select会解决这个问题，这样做看起来很奇怪。我注意到，当我添加用JavaScript创建的第三个div时，呈现的空白是不同的，你不必浮动。。。只需使用css格式化渲染/生成的HTMLCSS如何处理元素之间存在渲染文本节点的事实？@rpf3-

字间距

和

字母间距

有时会使用，请参阅最常见解决方案的概述。