動的に挿入されたコンテンツの空白が消えます

Question

ユーザーがどれだけ多くのフィールドを必要とするかによってフィールドを作成または削除するシンプルなjavascriptセットアップがあります。しかし、ユーザーが追加ボタンをクリックして別のフィールドを作成すると、フィールドと要素の間のスペースは完全に消えます。パディングやマージンは適用されず、マージンを適用しても差異は残ります。ここで

はここにそれがどのように見えるかだ

<div class="tax-cont"> 
    <input type="text" class="form-control inline-field md" placeholder="Tax Name"> 
    <div class="input-group inline-group md"> 
    <input type="text" class="form-control" placeholder="Value"> 
    <label class="input-group-addon"><i class="fa fa-percent"></i></label> 
    </div> 
    <a class="addRemove btn btn-success btn-round btn-sm"><i class="fa fa-plus"></i></a> 
</div> 

繰り返しだ部分とJavaScript

// Add or Remove additional departure dates 
    var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name"><div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div><a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>'; 

    $('.tax-cont .addRemove.btn-success').on('click', function(){ 
    var lastTaxbox = $('.tax-cont').last(); 
    lastTaxbox.after($(taxContent)); 
    }); 
    $('.form-group').on('click', '.btn-danger', function(){ 
    $(this).parent().remove(); 
    }); 

だ

これは全く起こっている理由を私は理解できません。ここにはcodepenがあります。

Answer 1

これは、空白になると、inlineとinline-block要素が動作するために起こります。元のhtmlソースには、<input>と<div>の間に新しい行があります。これは空白で、ページ上の2つの要素の間に空白が入ります。

<input type="text" class="form-control inline-field md" placeholder="Tax Name"> <!-- new line --> 
<div class="input-group inline-group md"> ... </div> 

あなたDOMに要素を追加するためにJavascriptを使用している場合しかし、nodeが追加に空白はありません。それでは、2つを一緒に貼り付けるだけです。元のソースから新しい行を削除すると、2つの入力も一緒に固定されます。あなたはすべての行が同じ間隔を維持を確認するために、次の<div>に<input>またはmargin-leftにmargin-rightを使用できるソリューションとして

。

Answer 2

他の人が指摘しているように、挿入されたセットの間にスペースがない理由は、コード間にスペースがないからです。それをよく説明するlinkを共有してくれたnicholasに感謝します。

問題を修正するために、元のDOMと同じ領域を生成するjavascriptコード（ ）に空白を追加しました。

var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name">&nbsp;<div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div>&nbsp;<a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';