爲什麼添加元素刪除元素之間的空間？

我已經應用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

回答