爲什麼jQuery append（）爲「ajaxed」數據添加左邊距/填充？

Question

我有一個包含標籤的div（如stackoverflow上的標籤功能）。我使用ajax將新標籤附加到這個外部div。一切工作正常，除了有一個額外的左邊距或約5px的添加到新添加的標籤。當我檢查html時，沒有保證金或填充列表，但它肯定存在。 Chrome，Firefox，Safari和Opera也會發生同樣的情況。這裏是我的代碼：

HTML：

<div class="tags_wrap"> 
    <div class="tag"> 
     <div class="tag_wrap">Tag 3</div> 
    </div> 
    <div class="tag"> 
     <div class="tag_wrap">Tag 2</div> 
    </div> 
    ... 
</div> 

CSS：

.tags_wrap { 
    margin:1px 7px 5px 0px; 
    float:left; 
    text-align:left !important; 
} 

.tag { 
    padding:0; 
    margin:4px 7px 0 0; 
    border: 1px solid #094C7C; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    background-color:#fff; 
    color:#000; 
    position:relative; 
    display:inline-block; 
    font-size:12px; 
} 

.tag_wrap { 
    position:relative; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    border-top: 1px solid #1C7ABF; 
    border-right: 1px solid #1C7ABF; 
    border-bottom: 1px solid #1C7ABF; 
    border-left: 1px solid #1C7ABF; 
} 

的jQuery：

$(document).ready(function(){ 
    $('form#addSomeTags').unbind('submit').bind('submit',function() { 
     var newTag = $("form#addSomeTags > input[name=tagField]").val(); 
     $.ajax({ 
      type: "POST", 
      url: 'add_tag.php', 
      dataType: 'html', 
      data: {tag:newTag}, 
      success: function(data){ 
       $('.tags_wrap').append(data); 
       } 
      } 
     }); 
     return false; 
}); 
}); 

的data我的PHP腳本看起來成功完成後返回.ajax()像其他標籤一樣：

<div class="tag"> 
    <div class="tag_wrap">Tag 2</div> 
</div> 

在新的「ajaxed」標籤上始終存在這種不需要的左邊距或填充。如果我刷新頁面，則此邊距不再存在。任何想法爲什麼發生這種情況？

Answer 1

很可能，這只是空格，而您得到的HTML答案以附加的空格字符開頭。當您刪除所有這些，它應該工作（demo）：

Answer 2

這是當一個使用顯示器時出現一個明顯衆所周知的問題：inline-block的： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

我個人修復這種利用Flexbox的：

父：

display: flex 

，如果需要的話，對孩子：

flex-shrink: 0