Have you ever experienced, in a HTML list of elements using display: inline-block property, having an element on an other line, without any clear reason ?

Let’s take an example :

In the example above, there are 5 elements and each element of the HTML list has a 20% width, hence 100% in total. There is no apparent margin applied so all elements should go on one line and only one line.

However, when you deal withinline-block elements, each space counts. If we take a look to the HTML structure, we see that for lisibility concern, all list elements are in a specific line.

2 solutions for this issue :

The First (and less practical) is to delete every spaces in the ul list in the HTML structure. Which will get this following code :

<ul>
<li>First list</li><li>Second list</li><li>Third list</li><li>Fourth list</li><li>Fifth list</li>
</ul>

Secondly (and more elegant to me) is to use the font-size property with the 0 value on the parent container and then apply font-size to list elements without modifying HTML code.

Example :