Estranho Espaçamento Entre Elementos inline-block em Listas Horizontais

Já vi várias vezes isto acontecer e até mesmo eu já me deparei com este problema enquanto trabalhava em projectos.

Quando nós colocamos uma série de elementos inline-block como normalmente costumamos colocar no HTML, por alguma razão estes irão ter um ligeiro espaçamento entre eles.

Como por exemplo:

<nav>
    <a href="#">Um</a>
    <a href="#">Dois</a>
    <a href="#">Três</a>
</nav>

nav a {
    display: inline-block;
    padding: 5px;
    background: #ad9077;
    color:#fff;
}

Vai resultar em algo como:
► https://jsfiddle.net/8886pL5m/

Na maioria das vezes nós queremos que os elementos permaneçam juntos uns dos outros, como no caso de listas de navegação, para evitar o espaço em branco entre eles onde não é clicável.

Isto não é um bug (penso eu). É apenas como funciona a maneira de definir elementos numa linha. Estes espaçamentos são praticamente o mesmo que espaçamentos entre palavras.

Aqui estão alguns "hacks" abaixo de como podes remover o espaçamento entre elementos inline-block e colocá-los juntos uns dos outros.

Remover os espaços

A razão pela qual se obtém espaços, é porque na verdade temos espaços entre os elementos (uma quebra de linha e algumas abas contam como um espaço, só para que fique claro). Minimizar o HTML, ou usar qualquer um destes truques abaixo irá resolver este problema:

<ul><li>one</li><li>two</li><li>three</li></ul>

<ul>
    <li>
    one</li><li>
    two</li><li>
    three</li>
</ul>

<ul>
    <li>one</li
    ><li>two</li
    ><li>three</li>
</ul>

<ul>
    <li>one</li><!--
 --><li>two</li><!--
 --><li>three</li>
</ul>

Aqui está o resultado no jsFiddle:
► https://jsfiddle.net/f8vvt2tk/

Mas todos eles aparentam ser um bocado manhosos, mas dão conta do recado.

Margem Negativa

Podes colocar os elementos de volta nos seus lugares adicionando uma margem negativa de 4px aos elementos (poderá ser necessário ajustar o valor dependendo do tamanho do font-size). Aparentemente isto é problemático em versões mais antigas do Internet Explorer (6 & 7), mas se não te importares com esses navegadores, pelo menos o teu código HTML fica limpo e bem formatado.

nav a {
    display: inline-block;
    margin-right: -4px;
}

Definir o tamanho da fonte para zero no elemento parent e redefini-lo no child

ATÊNÇÃO: Definir o tamanho fonte para zero, pode ser mau!!

Outra opção seria definir o font-size:0; no elemento parent e depois redefinir para o tamanho normal no elemento child como no exemplo abaixo. No entanto já li algures (num artigo qualquer da Google se não estou em erro, se me lembrar adiciono aqui o link) que isto pode ser mau para o SEO. Links com font-size:0px; podem ser considerados como maliciosos. No entanto penso que isto não fará muita diferença se se tratar apenas de uma lista no meio do corpo do site.

nav {font-size: 0;}
nav a {font-size: 16px;}

Não adicionar tags de encerramento

O HTML5 não se importa com a tag de encerramento. Embora tenhamos que admitir que isto parece bastante estranho ver o código assim.

<ul>
    <li>one
    <li>two
    <li>three
</ul>