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

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

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

好吧，我现在明白了。但我怎样才能追加空间？

与您的HTLML标记中的空白有差距。 'appendTo'不添加任何空格。 –

如果您想在图像之间有一个可控制的间隙，请在图像上应用边距或填充。

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

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

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

#main { 
    font-size: 0; 
}

这里的相等间隔的所有图像中的演示：http://jsfiddle.net/jfriend00/sHnS3/

2013-10-25 04:32:58 jfriend00

但有余量和填充不显示等等空间... http://jsfiddle.net/8Wd38/12/ –

@ C-Link - 你应该摆脱原始图像中的空白，以便您可以使用填充或边距同等地控制它们。然后他们将是相同的。看到这个演示：http://jsfiddle.net/jfriend00/sHnS3/ – jfriend00

原始图像没有空间... –

尝试添加float：left;在IMG类CSS

2013-10-25 04:32:08 Miller

因为你是克隆只有images看你有没有用在每个image一个line-break所以cloning只为images不line-breaks

如果你看到demo没有line-breaks，那么你将看到完成有他们之间space你想给same space每个image然后用padding:3px一样，

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

更新，您可以通过jquery做没有paading一样，

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

但我建议使用CSS如果是没有必要的，jquery

2013-10-25 04:32:24

所以我如何追加元素的换行符 –

@ C-Link是的，你可以看到我的'更新答案'和'小提琴' –

伟大和+1这个... –

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

2013-10-25 04:40:03

回答