How to reduce gap between two display:inline items?

Question

How to reduce gap between two display:inline items?

gap is showing on all browser?

ul.tabs li {
display:inline;
margin:0 padding:0;}

I can fix the problem using float:left in the LI elements but I need to understand why it's happening.

Answer 1

... but I need to understand why it's happening.

You may have whitespace or new lines between your inline elements.

---

For further reading, you may want to check out the following Stack Overflow post:

• Best way to manage whitespace between inline list items

Answer 2

Reduce the word-spacing CSS property to less than 1em.

Answer 3

You have whitespace between your inline elements. float: left fixes the problem, because floating implicitely converts the element to a block element, regardless of display: inline.

And you need a ; between margin:0 and padding: 0.