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>