为什么追加元素删除元素之间的空间？

Question

我已经应用了appendTo() jquery函数，但我想知道为什么图像之间没有空间。您可以在演示中看到附加图像正在消除差距。

var m = $('#main');
m.find('img:lt(3)').clone().appendTo(m);

demo

---

好的，我现在明白了。但是我怎么能追上这个空间呢？

Answer 1

因为您只是克隆了images，所以看到您在每个line-break中使用了image所以cloning只针对images而不是{{} 1}}

如果您看到demo没有line-breaks，那么您会看到它们之间有line-breaks 并且您希望为每个space提供same space，然后使用image，

padding:3px

Demo

已更新，您可以在img{ width: 100px; padding:3px; } 之前jquery执行此操作，

paading

Demo with jquery

但是如果var m = $('#main'); var n=m.clone(); n.find(':gt(2)').remove(); $(n.html()).appendTo(m);

中没有必要，我建议使用CSS

Answer 2

如果您希望图像之间存在可控间隙，请对图像应用边距或填充。

浏览器会在两个图像之间留下间隙，这两个图像之间的HTML中有空格。以编程方式添加图像时，它们之间没有空格，因此没有间隙。

您甚至可以通过设置font-size：0或删除HTML中的空格来将现有的空格缩小为空。

img {
    width: 100px;
    padding: 3px;
}

#main {
    font-size: 0;
}

以下是所有图像中间距相等的演示：http://jsfiddle.net/jfriend00/sHnS3/

Answer 3

尝试添加float：left;在img class css中

Answer 4

Jquery克隆消除了html元素之间的空格/换行符。