Question

我的身体中有一个空div，带有以下CSS：

div{
    border: 1px solid black;
    width: 100px;
    height: 100px;
    display: inline-block;
}

然后我使用jQuery来克隆元素几次。在结果中，为什么原始的会占用额外的保证金？

Answer 1

这是display: inline-block的问题。我通常用font-size: 0解决这个问题。 http://jsfiddle.net/CcmFJ/2/

Answer 2

这是display:inline-block这样做的。有几种不同的方法可以解决这个问题，很多方法已经涵盖在问题display: inline-block extra margin上。

我首选的方法是在容器上设置font-size:0。

Answer 3

实际上是由于.append()方法注入了空白区域。你最终得到了这个：

<body style="">
  <div></div>






<div></div>...

如果你使用.after()并插入这样的div：

for (var i = 0; i < 20; i++){
    $("div:first").after($("div:first").clone());
}

克隆之前没有额外的空格。的 jsFiddle example

Answer 4

有许多方法可以在inline-blocks

之间对抗这些空间

有许多例子的最佳资源可在以下链接中找到：
CSS-Tricks

HTML-没有操纵css的例子（例如）：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>