I've come across a particular markup structure that has caught my attention:
<!-- .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>
Also, I have incorporated some JQUERY scripting to dynamically add more .section elements, like so:
$('#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>');
});
However, I noticed a discrepancy in the CSS margins and padding when appending new .section elements.
Upon further examination, it became evident that utilizing a single-line format for the HTML markup, like shown below, resulted in consistent CSS spacing:
<!-- .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 pre-supplied .section elements and the dynamically added ones have consistent CSS spacing.
Link to the original format: http://jsfiddle.net/projeqht/NCfym/
Link to the single-line format: http://jsfiddle.net/projeqht/NCfym/1
My inquiry is as follows:
Why does the formatted HTML markup yield different CSS spacing compared to the same markup written on a single line of HTML code?