A Space between Inline-Block List Items [duplicate]

I have seen this and answered on it before:

After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.

To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here.

---

As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

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

This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font’s spacing setting, so you must reset it for the inlined elements and set it again for the content within.