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

Answer 2

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!

Answer 3

To avoid those spaces you can use flex css property

ul {
    display: flex;
}

See example.

Answer 4

That space is correct with inline content. You have two alternatives:

1. Put them on the same line like you're doing; or
2. Use floats.

For example:

ul { overflow: hidden; }
li { float: left; border: solid 1px blue; margin: 0px; }

The overflow: hidden ensures the containing <ul> won't collapse. Compare the difference with and without it if you add a red border to the <ul>.

Answer 5

Apply float property to li's and use CSS reset or atleast:

* {
 margin:0;
 padding:0;
}