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.

Expressway

I don't seem to see that effect in your jsbin, all have same spacing. – Dactylo

@Esa Did you click? then you can see the difference. – Rupture

I do see the effect, I'm using Chrome. – Swinson

Oh yeah, you need to click the "Two" sorry. I see it now. – Dactylo

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...

Startle

Thank you, I really appreciate the link for further learning about the issue, very informative and concise. – Expressway

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

Outturn

Answer 3

easy fix would be - article

DEMO

ul#list{      
    font-size: 0;
}

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

Komatik

Although note that this doesn't work on some versions of Android, if this is a concern – Startle