[html] A Space between Inline-Block List Items

Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML

Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.

li {_x000D_
  border: 1px solid black;_x000D_
  display: inline-block;_x000D_
  height: 25px;_x000D_
  list-style-type: none;_x000D_
  text-align: center;_x000D_
  width: 50px;_x000D_
}_x000D_
ul {_x000D_
  padding: 0;_x000D_
}

<ul>_x000D_
    <li>One</li>_x000D_
    <li>Two</li>_x000D_
    <li>Three</li>_x000D_
</ul>

just remove the breaks between li's in your html code... make the li's in one line only..

I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

You add a comment sign between each end of, and start of : "li" Then the horizontal space disappear. Hope that answer to the question Thanks

Actually, this is not specific to display:inline-block, but also applies to display:inline. Thus, in addition to David Horák's solution, this also works:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Even if its not inline-block based, this solution might worth consideration (allows nearly same formatting control from upper levels).

ul {
  display: table;
}
ul li {
  display: table-cell;
}

• IE8+ & major browsers compatible
• Relative/fixed font-size independent
• HTML code formatting independent (no need to glue </li><li>)

Solution:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

You must set parent font size to 0

Another solution, similar to Gerbus' solution, but this also works with relative font sizing.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

I would add the CSS property of float left as seen below. That gets rid of the extra space.

ul li {
    float:left;
}