Inline-block a bílé znaky

Mějme jednoduchý cíl: umístit do řádku 3 odkazy, každý 100 px široký s 5px mezerou mezi nimi. Výsledná celková šířka by proto měla být 310 px (šířka: 3 * 100 px + odsazení: 2 * 5 px).

Proč se to tedy do obalu o šířce 310 pixelů ↑ nevejde a třetí odkaz odskočí na další řádek?

Na vině jsou mezery/odřádkování mezi jednotlivými odkazy (samostatná ukázka).

<a href="#">Odkaz</a> <a href="#">Odkaz</a>

Řešení

První možnost je v HTML kódu mezery odstranit (ukázka):

<a href="#">Odkaz</a><a href="#">Odkaz</a>

Případně pro lepší přehlednost posunout koncovou značku (ukázka).

<a href="#">Odkaz</a
><a href="#">Odkaz</a>

Nebo zakomentovat (ukázka). Moc elegantní se mi to ale nezdá.

<a href="#">Odkaz</a><!--
 --><a href="#">Odkaz</a>

Ještě je možné se mezer zbavit nulovou velikostí písma (font-size: 0) pro rodiče a následným obnovením velikosti pro položky s inline-block (ukázka). Není to ale úplně spolehlivé a nenávratně se tím rozhodí relativní velikosti písma.

Jinak se nabízí na inline-block resignovat a použít:

• Tabulkové zobrazení display: table-cell (ukázka). Funkční od IE 8.
• Odkazy floatovat (ukázka). Funkční všude.