Does indenting or white space matter in html?

Question

Ofcourse indenting is need on our markup , but that really matter the way the browser render.?

I have an simple structure with label , span and input. The middle one without indent got a alignment change , why this is happening ?

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

Demo issue in firefox and chrome

Answer 1

Whitespace does make a difference in page rendering, howevera string of whitespaces longer than one will just be rendered as one whitespace, so this (line break)

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

and this (no line break, but a whitespace between the span and input)

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

will be rendered the same, while this (no whitespace)

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

will be rendered without that extra space in between the elements.

Answer 2

Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.

This means, unless you use the tag <pre>, five white spaces get rendered just the same as a tab or fifty line breaks.