jquery - 为什么 HTML 标记中的空格会导致 CSS 不同？

Question

我有以下标记格式:

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

还有一些 JQUERY 可以根据需要附加更多 .section，如下所示:

$('#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>');
});

但是我注意到，每当我附加 .section

时，CSS 边距/填充都有点偏离

然后，我意识到如果我使用以下格式:

<!-- .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/

第二种格式:http://jsfiddle.net/projeqht/NCfym/1

所以我的问题是:

为什么格式化的 HTML 标记输出的 CSS 空间与写在 1 行 HTML 上的完全相同的标记不同？

Answer 1

换行符在 HTML 中算作一个空格，所以下面的代码在元素之间有一个空格:

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

这个也有:

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

但是这个没有空格:

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

这不是“CSS 空间”，而是一个老派的“HTML 空间”。 :D