How can I stop the new line from adding a space between my list items in HTML

Question

I have the following HTML;

li 
{
    list-style: none;
    border: solid 1px blue;
    display: inline;
    margin: 0px 0px 0px 0px;
}
...
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

When I add the list items on their own line they appear with a horizontal space between them, but when I do it as;

<li>Item 1</li><li>Item 2</li><li>Item 2</li>

they dont.

Is there anyway to stop the new line from showing up as the blank space, or do I need to use a negative margin?

Answer 1

You can remove that space by using HTML comments:

<ul>
   <li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 2</li>
</ul>

There is also a css property supported by newer browsers, but I can't remember what it's called (this is a hard search query).