How to reduce gap between two display:inline items?

How to reduce gap between two display:inline items?

gap is showing on all browser?

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

alt text http://img167.imageshack.us/img167/7283/pruebank5.gif

I can fix the problem using float:left in the LI elements but I need to开发者_运维百科 understand why it's happening.

---

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.

---

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

---

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