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

The reason there is space between them is because there is space between them. 🙂

You can float the li‘s to the left and that’ll get rid of it:

li { float: left; }

Ciao!