CODEWITHSUNDEEP
html
cosullivan
cosullivan

Reputation: 436

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

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?

Upvotes: 18

Views: 16110

Answers (5)

eremcha
eremcha

Reputation: 103

To avoid those spaces you can use flex css property

ul {
    display: flex;
}

See example.

Upvotes: 8

Kevin Beal
Kevin Beal

Reputation: 10858

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

Upvotes: 31

cletus
cletus

Reputation: 625307

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

Upvotes: 4

docwhat
docwhat

Reputation: 11704

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!

Upvotes: 10

eozzy
eozzy

Reputation: 68720

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

* {
 margin:0;
 padding:0;
}

Upvotes: 2

Related Questions