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

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>