1

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?

chenglou
  • 3,640
  • 2
  • 25
  • 33

4 Answers4

4

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

Novelist
  • 469
  • 4
  • 15
1

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.

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • 1
    Rather conflicted here, It's a rather easy question, however you still came up with the first answer. Though @Moredemons provided the answer without a link first. and he does have a jsfiddle. hmmmmm. – Ryan Apr 11 '13 at 22:17
  • Yes, editing the existing fiddle must have taken more time to answer. I saw no benefit in adding a link to a fiddle without also posting the code so opted for no code and no fiddle :-) – andyb Apr 11 '13 at 22:29
  • 1
    Hehe :) well I was watching when both your questions came in. His had the fiddle in the original post without editing. Eh not that it matters. He got the vote mostly because he has the right answer and only has 50 rep whereas you have... :P – Ryan Apr 11 '13 at 22:34
1

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

j08691
  • 204,283
  • 31
  • 260
  • 272
  • But you do get whitespace between the rows of clones which does not exist in @moredemons fiddle. – andyb Apr 11 '13 at 22:25
  • @andyb - no you don't. Any spaces would appear after the last clone. – j08691 Apr 11 '13 at 22:25
  • Yes, bad choice of the word _whitespace_ there. I meant that when comparing @moredemons fiddle to your fiddle that the result is visibly different and with this sort of layout I suspect that the OP would like no spacing between any sides of the boxes. – andyb Apr 11 '13 at 22:29
0

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>
nirazul
  • 3,928
  • 4
  • 26
  • 46
  • 1
    Care to explain the reason why this was downrated? – nirazul Apr 11 '13 at 22:19
  • 2
    Link only answers are bad http://meta.stackexchange.com/questions/143642/cant-link-only-answers-be-auto-deleted-instead-of-showing-up-in-the-review-queu – Ryan Apr 11 '13 at 22:20
  • well if beefing it up with copied examples is better behaviour... thx for the info anyway... – nirazul Apr 11 '13 at 22:25