7

次のマークアップ形式があります。

<!-- .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 スペースを出力するのはなぜですか?

4

3 に答える 3

9

HTML では改行はスペースとしてカウントされるため、次のコードでは要素間にスペースがあります。

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

これも持っています：

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

しかし、これにはスペースがありません:

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

これは「CSS スペース」ではなく、古い学校の「HTML スペース」です。:D

于 2013-07-29T14:56:26.490 に答える
3

HTML は複数の余分な行/スペースを削除しますが、これを行うと 1 つのスペースが残ります。:)

たとえば、これは同じことを行います。

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>
于 2013-07-29T14:56:25.480 に答える
3

それは、選択とチェックボックスがdisplay: inline-block. これにより、空白に敏感になります。

inline-block 要素は、インライン要素であるため、空白の影響を受けます (そうしないと、テキスト文字は動作上インラインと見なされるため、テキスト内のすべてのスペースをコーディングする必要があります)。inline-block 要素は、インライン要素 (空白に敏感で、互いに重ねるのではなく隣同士に配置) とブロック要素 (パディング CSS に注意) の両方のように動作します。

于 2013-07-29T14:57:44.097 に答える