jQuery clone() on a div positions it weirdly

StackOverflow https://stackoverflow.com/questions/15959795

  •  03-04-2022
  •  | 
  •  

Вопрос

I have an empty div in body, with the following CSS:

div{
    border: 1px solid black;
    width: 100px;
    height: 100px;
    display: inline-block;
}

http://jsfiddle.net/CcmFJ/1/

I then use jQuery to clone the element a few times. In the result, why is the original one taking up extra margin?

Это было полезно?

Решение 2

It's actually due to the white space being injected by the .append() method. You end up with this:

<body style="">
  <div></div>






<div></div>...

If you use .after() and insert the divs like this:

for (var i = 0; i < 20; i++){
    $("div:first").after($("div:first").clone());
}

you get no extra white space before the clones. jsFiddle example

Другие советы

That's the problem with display: inline-block. I usually fix this with font-size: 0. http://jsfiddle.net/CcmFJ/2/

It's the display:inline-block doing that. There are a few different ways to fix that, many covered on the question display: inline-block extra margin already.

My preferred way is setting font-size:0 on the container.

There are many many ways to fight those spaces between inline-blocks

The best resource with many examples is found under the following link:
CSS-Tricks

HTML-Examples without manipulating css would be (for example):

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

or: 

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top