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

Answer 2

HTML会删除多个额外的行/空格，但在执行此操作时仍会留下一个空格。：）

例如，这将做同样的事情：

http://jsfiddle.net/9ZqAr/

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

Answer 3

这是因为select和复选框是display: inline-block。这使得它们对空白区域敏感。

内联块的元素对空白区域敏感，因为内联元素是（否则，您必须在文本的所有空间中进行编码，因为文本字符被认为是行为的内联）。内联块元素的行为类似于内联元素（对空白区域敏感，彼此相邻而不是彼此叠加），以及块元素（heed padding CSS）。

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

3 个答案: