jquery - 追加された要素が要素間のスペースを削除するのはなぜですか?

Question

jquery関数を適用しましappendTo()たが、画像間にスペースがない理由を知りたいです。デモでは、追加された画像がギャップを取り除いていることがわかります。

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

デモ

---

わかりました。今わかりました。しかし、どうすればスペースを追加できますか?

Answer 1

それぞれでimagesa を使用した seeのみを複製しているためline-breakimagecloningimagesline-breaks

なしでデモを見ると、それらの間line-breaksにあることがわかります。それぞれspaceに与えたい場合は、のように使用します。same spaceimagepadding:3px

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

デモ

更新しました。jqueryいいねなしでできますpaading。

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

jqueryを使ったデモ

ただしCSS、必要がない場合は使用することをお勧めしますjquery

Answer 2

画像間のギャップを制御したい場合は、画像にマージンまたはパディングを適用します。

ブラウザーは、HTML 内に空白がある 2 つの画像の間にギャップを置きます。プログラムで画像を追加すると、それらの間に空白がないため、ギャップがなくなります。

font-size: 0 を設定するか、HTML 内の空白を削除することで、既存の空白を縮小してゼロにすることもできます。

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

#main {
    font-size: 0;
}

これは、すべての画像間で等間隔のデモです: http://jsfiddle.net/jfriend00/sHnS3/

Answer 3

float: left; を追加してみてください。img クラス css で

Answer 4

Jquery の複製により、html 要素間のスペース/改行が削除されます。