HTMLマークアップのスペースがCSSを異ならせるのはなぜですか？

Question

私は次のマークアップ形式があります：私はCSSマージン/パディングが少しだったことに気づい

$('#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以上を追加する

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

私はこのフォローインGフォーマット：http://jsfiddle.net/projeqht/NCfym/

第二のフォーマット：http://jsfiddle.net/projeqht/NCfym/1

<!-- .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マークアップによって供給される元の.sectionはjQueryの 添付.section

最初のフォーマットと同じCSSの間隔を有します私の質問はです：

HTMLの行に書かれているものと同じマークアップ以外の形式のHTMLマークアップが異なるCSSスペースを出力するのはなぜですか？

Answer 1

を改行をHTMLのスペースとしてカウントするので、次のコードは、要素間のスペースを持っています

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

この1つはあまりにもあります

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

しかし、この1はスペースがない：

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

これは、「CSSスペース」が、古い学校のHTMLスペース」ではありません。 ：D

Answer 2

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> 

Answer 3

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

インラインブロックである要素は、インライン要素が動作するため、テキストのすべてのスペースをコーディングする必要があるため、空白に敏感です。インラインブロック要素は、インライン要素（空白に敏感で、互いの上にではなく、隣り合っている）、ブロック要素（CSSに注意する）のように動作します。