How to remove the default margin of inline li elements?

Question

I have following HTML and CSS:

li {
  display: inline-block;
  padding: 10px;
  border: 1px solid red;
  margin: 0;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

I am trying to remove the margin among the li elements by setting margin: 0;, but it doesn't remove the margin.

How do I remove this gap?

Answer 1

Combining all lis in a single line solves the problem. But if you want to know more techniques to remove those margins you can visit : http://davidwalsh.name/remove-whitespace-inline-block.

It lists these techniques:

1. No Space Between Elements

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2. font-size: 0 on Parent

.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

3. HTML Comments

<ul>
 <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

4. Negative Margin

.inline-block-list li {
margin-left: -4px;
}

5. Dropping Closing Angle

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Answer 2

Its a weird thing where you need to remove whitespace take a look at this fiddle

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

http://jsfiddle.net/TPje6/3/

another thing you can do is add a margin: -2px; : http://jsfiddle.net/TPje6/6/

Float trick works well also, but makes styling a position more difficult

Answer 3

Try float: left; That will force your list items to be rendered without the extra whitespace.

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}