Почему добавленный элемент удаляет пространство между элементами?

Question

Я применил функцию jquery appendTo(), но я хотел бы знать, почему изображение не имеет места между изображениями. Вы можете видеть в демонстрационном примере добавленное изображение, которое устраняет пробел.

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

demo

---

Хорошо я получил его. Но как я могу добавить это пространство?

Answer 1

Если вам нужен контролируемый промежуток между изображениями, то примените к изображениям поля или отступы.

Браузеры помещают промежуток между двумя изображениями, у которых есть пробелы в HTML между ними. Когда вы добавляете изображения программно, между ними нет пробелов и, следовательно, нет пробелов.

Вы можете даже сократить существующие пробелы до нуля, установив размер шрифта: 0 или исключив пробелы в HTML.

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

#main { 
    font-size: 0; 
} 

Вот демо равноотстояния среди всех изображений: http://jsfiddle.net/jfriend00/sHnS3/

Answer 2

Попробуйте добавить float: left; в классе IMG CSS

Answer 3

Поскольку вы клонировать только images см вы использовали в каждом imageline-break Так cloning делается только для images не line-breaks

Если вы видите demo без line-breaks, то вы увидите, есть space между ними И вы хотите, чтобы дать same space для каждого image затем использовать padding:3px как,

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

Demo

Обновлено, вы можете сделать это jquery без paading как,

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

Demo with jquery

Но я предлагаю использовать CSS, если нет необходимости в jquery

Answer 4

Jquery Клонирование устранить разрывы пространства/строки между HTML элементов.