1

Alinhei duas divs lado a lado, porém ficou um espaço no meio delas, como retirar?

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

3 Respostas 3

3

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

4
  • Valeu cara, funcionou perfeitamente! Só uma dúvida, pq isso resolveu meu problema? hahaha
    – Juan Lima
    Commented 19/04/2017 às 16:49
  • Dei uma editada vê se fico bam...Vlw @JuanLima
    – MagicHat
    Commented 19/04/2017 às 18:09
  • Ficou ótimo, compreendi. Mais uma dúvida: dependendo de como vou rendimensionando a janela, as imagens ficam muito pequenas e descoladas. Sabe alguma forma de manter elas do mesmo tamanho e coladas? Agradeço desde já
    – Juan Lima
    Commented 19/04/2017 às 20:57
  • Talvez setando o tamanho no height e width...
    – MagicHat
    Commented 19/04/2017 às 21:17
1

O problema é que você tem espaço entre os elementos: uma quebra de linha. Se você pegar o html que possui e comprimir, o problema já será resolvido:

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

Porém isso é ruim de visualizar. Então uma técnica pode ser colocar um comentário (<!-- -->) após os elementos, por exemplo:

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

Ou então, não fechar a tag na mesma linha. Por exemplo:

<div> ... </div
><div> ...</div>
1
  • 1
    +1 Não sabia que esse espaçamento poderia interferir na exibição dos elementos. Interessante.
    – Woss
    Commented 20/04/2017 às 15:32
0

seria bom você usar algum reset ou crie o seu proprio antes de começar a dar estilo a suas páginas pesquise sobre reset css.. Ex:

* {
margin: 0 auto;
padding: 0;
text-decoration: none;
list-style: none;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
5
  • Poderia explicar o que isso tem haver a pergunta?
    – Marconi
    Commented 19/04/2017 às 13:55
  • Por padrão os navegadores já vem com alguns padrões de css.. se você não alterar eles podem ocasionar alguns espaçamentos indesejados como no caso.. e outros probleminhas.. como eu falei pesquise sobre reset css...
    – wDrik
    Commented 19/04/2017 às 13:59
  • E você chegou a testar verificando se resolve o problema? Eu testei aqui a sua solução e não apresentou diferenças.
    – Woss
    Commented 19/04/2017 às 14:20
  • Eu apenas indiquei uma possível solução e indiquei ao mesmo estudar o assunto, pois o reset pode evitar diversos espaçamentos indesejado "como no caso" e se ele não utilizar um no seu projeto com certeza terá problemas do gênero.
    – wDrik
    Commented 19/04/2017 às 14:24
  • @Drik eu entrei no mesmo questionamento do Anderson pelo fato que meu teste ficou da mesma maneira que está a pergunta.
    – Marconi
    Commented 19/04/2017 às 17:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .