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>
```