次のマークアップ形式があります。
<!-- .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>
.section
そして、次のように必要に応じてさらに追加する JQUERY がいくつかあります。
$('#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>');
});
しかし、追加するたびにCSSのマージン/パディングが少しずれていることに気付きました.section
次に、この次の形式を使用すると、次のことに気付きました。
<!-- .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>
現在、マークアップによって提供されるオリジナル.section
には、追加された JQUERY と同じ CSS 間隔があります.section
最初の形式: http://jsfiddle.net/projeqht/NCfym/
2 番目の形式: http://jsfiddle.net/projeqht/NCfym/1
だから私の質問は:
フォーマットされた HTML マークアップが、HTML の1行に記述されたまったく同じマークアップとは異なる CSS スペースを出力するのはなぜですか?