Why do spaces in HTML markup cause CSS to differ?

Question

I have the following markup format:

<!-- .section markup with line breaks and indentation (normal formatted coding) -->
<form id="form" name="form">
  <div class="section">
    <input type="checkbox" class="switch" />
    <select class="overlays" name="overlays">
        <option value="test">Test</option>
    </select>
    <input type="text" class="parameters" />
  </div>
</form>
<span id="plus">+</span>

And some JQUERY to append more .section as I need like this:

$('#plus').click(function () {
  $('#form').append('<div class="section"><input type="checkbox" class="switch" /><select class="overlays" name="overlays"><option value="test">Test</option></select><input type="text" class="overlay_parameters" name_parameters" /></div>');
});

But I noticed that the CSS margins/padding was a bit off whenever I appended .section

Then, I realized that if I used this following format:

<!-- .section markup all in one line -->
<form id="form" name="form">
  <div class="section"><input type="checkbox" class="switch" /><select class="overlays" name="overlays"><option value="test">Test</option></select><input type="text" class="parameters" /></div>
</form>
<span id="plus">+</span>

NOW the original .section that is supplied by markup has the same CSS spacing as the JQUERY appended .section

First format: http://jsfiddle.net/projeqht/NCfym/

Second format: http://jsfiddle.net/projeqht/NCfym/1

So my question is:

Why is the formatted HTML markup outputting different CSS spaces than the exact same markup written on 1 line of HTML?

Answer 1

A line break counts as a space in HTML, so the following code has a space between elements:

<input type="text">
<input type="text">

This one has too:

<input type="text"> <input type="text">

But this one has no space:

<input type="text"><input type="text">

This is not a 'CSS space', but an old school 'HTML space'. :D