Como remover o espaço entre elementos com display inline/inline-block - HTML e CSS

Como remover o espaço entre elementos com display inline/inline-block - HTML e CSS

Quando utilizamos elementos com display inline ou inline-block é comum aparecer uma pequena margem entre os elementos. E mesmo setando margin:0 esse espaço continua aparecendo.

ul li {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:red;
    margin:0;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Isso acontece por causa que os elementos do tipo inline aceitam espaço e quebra de linha como separador. Para solucionar esse problema precisamos remover os espaços e quebras de linha do código fonte.

Podemos fazer isso de várias maneiras.

Removendo as quebras de linha de um elemento pro outro, deixando todos juntos na mesma linha:

<ul>
    <li>1</li><li>2</li><li>3</li>
</ul>

Fechando o elemento junto com a abertura do próximo:

<ul>
    <li>1</li
    ><li>2</li
    ><li>3</li>
</ul>

Usando os comentários do HTML para informar que a quebra de linha é um comentário apenas:

<ul>
    <li>1</li><!--
    --><li>2</li><!--
    --><li>3</li>
</ul>

Ou utilizando uma linguagem backend para printar o código sem as quebras de linha, como o PHP:

<ul>
    <li>1</li><?
    ?><li>2</li><?
    ?><li>3</li>
</ul>

Referências