Pode resolver isso usando uma gambiarra:
#tudo{
font-size: 0;<<-------- esta
text-align: center;
margin: 0 auto;
}
#tudo {
font-size:0;
text-align: center;
margin: 0 auto;
}
.desktop {
display: block;
}
.img {
display: inline-block;
}
<div id="tudo">
<div class="desktop">
<div class="img">
<a href="https://www.google.com">
<img src="http://placehold.it/100x100" height="100%">
</a>
</div>
<div class="img">
<a href="https://www.google.com">
<img src="http://placehold.it/100x100" height="100%">
</a>
</div>
</div>
</div>
Quando nós identamos o código deixamos alguns espaços em branco, a propriedade inline-block
vai colocar esse espaço entre os elementos.
Por exemplo, se eu pegar o teu código sem alteração nenhuma e colocá-lo inline
na indentação ele também irá funcionar, veja :
#tudo {
text-align: center;
margin: 0 auto;
}
.desktop {
display: block;
}
.img {
display: inline-block;
}
<div id="tudo"><div class="desktop"><div class="img"><a href="https://www.google.com"><img src="http://placehold.it/100x100" height="100%"></a></div><div class="img"><a href="https://www.google.com"><img src="http://placehold.it/100x100" height="100%"></a></div></div></div>
Então havendo o espaço o navegador inputa ao elemento um tamanho de fonte padrão, como não tem nenhum caractere além do caractere espaço, fica esse tamanho padrão, e atribuindo 0
a fonte ele fica com o tamanho 0
..Dhãããrrrr
Há outras formas de resolver isso. Veja algumas