title: css missing margin after jquery append
body: <p>I have used jQuery's <code>.append()</code> function to create a set of divs which wrap some <code>&lt;input /&gt;</code> and <code>&lt;span&gt;</code>, but after I create the divs, it missing the margin between <code>&lt;input&gt;</code> tag,just as the following picture:  </p>
  
  <p>image with margin:
  <img src="https://i.stack.imgur.com/6uNU7.png" alt="enter image description here"> </p>
  
  <p>image without margin(jquery create):
  <img src="https://i.stack.imgur.com/E4T6a.png" alt="enter image description here"></p>
  
  <p>the html code:</p>
  
  <pre><code>&lt;div class="controls"&gt;
      &lt;input type="text" class="span3" name="name" placeholder="规格名称" /&gt;
      &lt;input type="text" class="span3" name="name" placeholder="商品价格" /&gt;
      &lt;input type="text" class="span3" name="name" placeholder="商品原价" /&gt;
      &lt;input type="text" class="span2" name="name" placeholder="商品库存" /&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;span id="good_sku_add" class="icon-plus"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the jquery code:</p>
  
  <pre><code>$('#good_sku_add').click(function(){
      html = '';
      html += '&lt;div class="controls"&gt;';
      html += '&lt;input type="text" class="span3" name="name" placeholder="规格名称" /&gt;';
      html += '&lt;input type="text" class="span3" name="name" placeholder="商品价格" /&gt;';
      html += '&lt;input type="text" class="span3" name="name" placeholder="商品原价" /&gt;';
      html += '&lt;input type="text" class="span2" name="name" placeholder="商品库存" /&gt;';
      html += '&amp;nbsp;&amp;nbsp;&amp;nbsp;';
      html += '&lt;span id="good_sku_add" class="icon-plus"&gt;&lt;/span&gt;';
      html += '&lt;/div&gt;';
  
      $(this).parent().after(html);
      $(this).parent().parent().trigger('create');
    })
  </code></pre>
  
  <p>I search some doc on stackoverflow and google,but it can't work,can anyone give me some idea?</p>