Por que pequenos espaços continuam aparecendo nas minhas páginas da web?

Question

Esta pode ser uma pergunta estúpida, mas se há um melhor ou maneira correta de fazer isso, eu adoraria aprender.

Eu ter executado através isso algumas vezes, inclusive recentemente, onde pequenos espaços aparecem na versão prestados da minha página HTML. Intuitivamente eu acho que estes não devem estar lá, porque fora do texto ou entidades a formatação de HTML de uma página não deve importar, mas aparentemente ele faz.

O que eu estou me referindo é isso - eu tenho algum arquivo do Photoshop a partir do cliente sobre a forma como eles querem seu site para olhar. Eles quer olhar basicamente de pixel perfeito para a imagem neste arquivo.

Um dos lugares nas chamadas de página para a barra de menu, onde cada um faz o bit mudança no pairar, age como um hyperlink, etc. No arquivo de Photoshop esta é uma barra longa, então um barato e fácil de fazer isso é apenas dividir esse segmento em várias imagens e, em seguida, colocá-los ao lado do outro no arquivo.

Então, instintivamente, eu colocá-lo fora assim (não mais do que isso, mas esta é a essência)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

e assim por diante.

O problema é que as imagens têm este pequeno espaço entre eles o que é inaceitável uma vez que o cliente quer essa coisa de pixel-perfect (e isso só parece simples mau).

Uma maneira de obtê-lo para processar corretamente é remover os retornos de carro entre as imagens

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

O que faz com que as imagens vão até um contra o outro (o efeito desejado), mas ele faz a linha incrivelmente longo e o código mais difícil de manter (que envolve aqui em SO e esta é uma versão simplificada - o real tem mais nomes de arquivos e JavaScript polvilhado em fazer a pairar).

Parece-me que isso não deve acontecer, mas parece que o retorno de carro no HTML está sendo processado como um pequeno espaço vazio. E isso acontece em todos os navegadores, parece.

Am I certo ou errado para pensar os dois trechos acima deve processar o mesmo? E há algo que eu estou fazendo errado? Talvez salvar o arquivo com a codificação errada? Devo fazer cada um desses links um elemento CSS perfeitamente posicionado vez?

Answer 1

O espaço em branco (retorno de carro incluído) geralmente é processado como espaço em todos os navegadores.

Você precisa colocar os elementos um após o outro, mas você pode usar um truque:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Isso também parece um pouco feio, mas ainda é melhor do que uma única linha. Você pode alterar a formatação, mas a idéia é adicionar retornos de carro dentro dos elementos e não entre eles.

Answer 2

Eu não sei se isso é suficiente geral para sua página, mas você poderia classe estes especial a tags e flutuar-los todos esquerda, então eles vão bando juntos, não importa como o seu HTML é formatado.

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Answer 3

Essa parte da especificação HTML -. Os espaços são na marcação por isso eles são considerados parte do documento

As únicas outras opções que você tem, desde que você não gosta a formatação, é quebrar as tags de html:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

o que é indesejável na minha opinião, ou criar o html dinamicamente -., Quer através de JavaScript ou usar um sistema de templates e html dinâmico

Answer 4

A razão é simples: as questões espaço em branco em HTML, mas apenas uma vez. espaço em branco repetido é ignorado, apenas o primeiro é mostrado.

A única maneira confiável de evitar isso é, como você fez, colocando nenhum espaço em branco entre os elementos.

Quando layout de tabela com base seria menos fora do que é atualmente, você poderia usar uma tabela de fronteira zero, zero de preenchimento para alinhar seus elementos enquanto tê-los em linhas separadas no código-fonte.

Answer 5

A maneira que eu lidar com isso é usar uma lista não ordenada, e fazer com que cada imagem / vincular um item. Em seguida, use CSS para exibir cada linha item e e flutuar-los para a esquerda.

Isto lhe dará muito mais flexibilidade e fazer a marcação muito legível.

Answer 6

O comportamento que você demonstrado acima é verdade, como os deleites navegador retornos de carro como um espaço. Para corrigi-lo, você pode denominá-lo assim com:

a { display: block; float: left; }

Por favor, note que a regra acima aplica-se a todos os links, de modo que você pode querer restringir o seletor para certos elementos somente, ou seja:

#nav a { display: block; float: left; }

Answer 7

Se você estiver indo para fazer uma interface com abas em um site, se esforçam muito para fazê-lo corretamente, e vai valer a pena. Existem muitos sites com grandes exemplos de implementações guia CSS. Considere o uso de um deles.

Este tem um monte de guias CSS + Javascript / AJAX. Ou consulte este conjunto de CSS simples exemplos (alguns em estilo). Finalmente, confira este fato-muito-cool guias gerador .