jQuery elements added with after() have incorrect spacing

Question

I have a <ul> with a number of <li> elements in it. A number of them are hidden and are added to the end of the list upon clicking with jQuery after().

However, for some reason, the elements added with after() are always a bit too close to the element they are added after.

I have made a jsbin to demonstrate here

Also, a screenshot to explain:

The reason for using after() instead of a simple addClass or show is because the list relies on applying styles with li:nth-child(even), so if the elements are there, but only hidden, it causes issues in the styling of the list.

Answer 1

The answer is because the <li> elements are inline, and in your HTML are separated by a newline, which when rendered creates a space between them.

When you are programatically inserting elements, they are not separated by a newline so no space appears between them.

You can see the effect of the newline by placing all the li elements on a single line, the spacing will disappear, or by adding float:left to the li in your CSS

Demo of this effect

More reading...

Answer 2

As SW4 said. there is no spacing between the <li>

Here it works http://jsbin.com/licowaqe/4/edit the difference ist in the HTML

data-additional=" <li>Four</li> <li>Five</li> <li>Six</li>" has spaces

Answer 3

easy fix would be - article

DEMO

ul#list{      
    font-size: 0;
}

ul#list li {
    font-size: 36px; /* put the font-size back */
}