缩进或空格在html中是否重要？

Question

在我们的标记上需要进行缩进，但这对浏览器呈现的方式非常重要。？

我有一个带标签，跨度和输入的简单结构。没有缩进的中间版本有一个对齐更改，为什么会发生这种情况？

<label class="field-row">                
       <span class="label-text" >Email</span>
       <input type="email" />
 </label>
 <label class="field-row">
       <span class="label-text" >Email</span><input type="email" />                
 </label>

firefox和chrome中的

Demo 问题

Answer 1

空白确实在页面渲染方面有所作为，如何将长度大于1的空格字符串渲染为一个空格，所以这（换行符）

<label class="field-row">                
   <span class="label-text" >Email</span>
   <input type="email" />
</label>

和这个（没有换行符，但跨度和输入之间有空格）

<label class="field-row">                
   <span class="label-text" >Email</span> <input type="email" />
</label>

将呈现相同，而这（无空格）

<label class="field-row">                
   <span class="label-text" >Email</span><input type="email" />
</label>

将在没有元素之间的额外空间的情况下渲染

。

Answer 2

空格在内联元素的呈现方面有所不同，但超出单个元素的所有内容总是减少到一个空格。

这意味着，除非您使用标记<pre>，否则五个空格会与标签或五十个换行符相同。