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.