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