Question

I’ve got some trouble in understanding the following behavior. I’m having a container <div> which contains a few inline-block <div> nodes. Example view:

Now my requirement is, to prepend new foobar inline-block <div> elements. No Problem, using jQuery -> .prependTo() to the rescue(applied on the parent container). Now comes the issue, the first time using .prependTo() “something, somewhere” creates an untrackable margin on the right side from the newly inserted element (it lookes like this to me). Example:

As you can see, only the very first element has this margin (again, I cannot track the space using Firebug/DevTools, it seems like its not there). All further insertions are just fine. Using .insertBefore() on the very first element also works fine and looks great. Unfortunatly I cannot use .insertBefore() in my particular usecase, that is why I’m asking for some heads-up here.

What do I miss ? Where comes this strange margin/spacing from ?
How to avoid it ?

Here is the jsfiddle playground where the above images come from:

http://jsfiddle.net/r7d6s/

I only tested on Firefox 4/5/6 so far.

Answer 1

It’s the whitespace inside your parent div (i.e. line break). It gets sanitized to an ordinary space by HTML renderer. Remove it:

<div id="area"></div>