html - Unwanted margin in inline-block list items

Question

This question already has answers here:

Answer 1

This is caused by the display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

Change it to float: left;.

I thought it was the padding but took a closer look and turns out it was the display :)

Example here.

---

After further research I have discovered that inline-block is a whitespace dependent method and renders a 4px margin to the right of each element.

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.

Hope that helps :)