CODEWITHSUNDEEP
javascriptjqueryhtml
jAndy
jAndy

Reputation: 236032

Weird margin when using .prependTo()

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:

enter image description here

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:

enter image description here

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.

Upvotes: 2

Views: 130

Answers (1)

Xion
Xion

Reputation: 22770

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>

Upvotes: 7

Related Questions