Javascript 有人能解释为什么jQuery附加的内联块项会丢失它们的空间吗？

所以我正在做一个项目，涉及到克隆一些对象并将它们附加到同一个父对象，然后我设置这些对象的动画，但我的计算似乎总是关闭，我意识到这是因为内联块项目总是有尾随空间，这很好，但是当我使用jQuery将克隆项附加到父div时，不包括尾随空间，这使得事情非常不一致，很难处理

当使用浏览器工具检查元素时，元素声称是相同的，设置边距和填充没有区别，这是一个bug还是我只是缺少了什么？下面是一个复制结果的简单演示

$（'ul'）。查找（'li'）。每个（函数（）{
$（'ul'）.append（$（this.clone（））；
});

li{
显示：内联块；
宽度：50px；
高度：50px；
背景:#555；
}

框之间的空间来自标记中的换行和缩进。jQuery在追加元素时不保留这种格式样式，因为它修改DOM，而不是直接修改标记，并且只追加您指定的元素

换句话说，jQuery添加新元素后，标记的真实外观如下：

<ul>
    <li></li>
    <li></li>
    <li></li>
<li></li><li></li><li></li></ul>

或者，如果您出于某种原因必须保留原始缩进样式（这将反映在父级的

innerHTML

）

---

请注意，这对渲染没有影响，因为所有连续空格和换行符都将折叠到单个空格。

什么空格？我在找什么？如果使用float:left；而不是内联块？请看这里：这是您解决问题的方法->@adeneo font-size:0解决了问题，谢谢@user3468621：这个问题（及其所有重复问题）询问元素之间的空间来自何处。这个问题问为什么附加的元素会丢失空间。我不认为这个问题是那个问题的翻版。啊，我明白了，谢谢，我一直在绞尽脑汁想这个问题，改变JSFIDLE来反映你所说的，这证明了你的观点伟大的观察！但你的回答解释了为什么会发生这种情况，而不是如何解决这个问题。我不是在批评你的答案，但实际上我很好奇如何解决它。@Bruno Monteiro：是的，只是我个人的回答风格——如果问题没有具体说明问题，我倾向于避免假设需要解决什么问题。但是在这种情况下，很容易推断，既然你问得很好，我会更新我的答案：）这确实让我感觉不那么疯狂，我不确定我将如何将我的所有项目放在一行，但是@adeneo在评论中给出了一个很好的修正above@keepevets：我不太喜欢将近似值硬编码为边距（您会注意到adeneo的CSS中有一个

右边距：4px

，它实际上是用来创建元素之间的空格，而不是

字体大小：0

）。在元素之间添加空格更为自然。

$('ul').find('li').each(function(){
  $('ul').append(' ').append($(this).clone());
});

$('ul').find('li').each(function(){
  $('ul').append('    ').append($(this).clone()).append('\n');
});