Remover o espaço em branco entre os elementos HTML ao usar as quebras de linha

Tente definir o font-size para 0. Assim, os espaços em branco entre as imagens serão 0 em largura, e as imagens não serão afetadas.

Dava-te jeito comentários.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

Você tem duas opções sem fazer coisas aproximadas com CSS. A primeira opção é usar o javascript para remover os filhos de espaços em branco das tags. Uma opção melhor, porém, é usar o fato de que espaços em branco podem existir dentro de tags sem que tenha um significado. Assim:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Depois de muita pesquisa, tentativa e erro encontrei uma maneira que parece funcionar bem e que não precisa de alterar manualmente o tamanho da fonte manualmente nos elementos das crianças, permitindo-me ter um tamanho de letra em padronizado em todo o doc.

No Firefox isto é bastante simples, basta colocar {[[0]} no elemento pai. Por alguma razão, o Chrome ignora isso (e tanto quanto eu testei, ele ignora o espaçamento de palavras independentemente do valor). Então, além disso, adiciono letter-spacing: -.31em ao Pai e letter-spacing: normal para as crianças. Esta fracção de um em é do tamanho do espaço apenas se o seu tamanho em For padronizado. O Firefox, por sua vez, ignora valores negativos para o espaçamento de letras, para que não o adicione ao espaçamento de palavras.

Testei isto no Firefox 13 (win/ubuntu, 14 no android), Google Chrome 20 (win/ubuntu), Android Browser no ICS 4.0.4 e IE 9. E sinto-me tentado a dizer que isto também pode funcionar num Safari, mas não sei bem...

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

O único problema é que ele não vai funcionar em IE 7 e versões anteriores, mas isso é corrigível com um hack

A Flexbox pode resolver facilmente este problema antigo:

.image-wrapper {
  display: flex;
}

Mais informações sobre o flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Use a folha de estilo CSS para resolver este problema como o seguinte código.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

Texto Em Alt http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

teste no Firefox 3.5 Final!

PS. o teu html deve gostar disto.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

Há alguma coisa que eu possa fazer além de quebrar no meio das etiquetas, em vez de entre elas?

Posicionar as marcas {[[0]} podem impedir isto, mas aconselho-o a não o fazer. contra isso, uma vez que isso significaria posicionar cada uma das imagens manualmente para alguma medida de pixels que pode ser um monte de trabalho.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

Note que não há espaços em nenhum desses códigos. Os locais onde os espaços são normalmente usados em HTML são substituídos com os dados de transporte. É menos descritivo do que usar comentários e recomenda-se a utilização de espaços em branco como o Paul de Vrieze.

Crédito a tech.co para esta abordagem.

O espaço em branco entre os elementos só é colocado lá pelo editor HTML para fins de formatação visual. Pode usar o jQuery para remover o espaço em branco:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

Isto detalha os elementos das crianças, limpa qualquer espaço em branco que resta antes de adicionar os elementos das crianças de volta.

Ao contrário das outras respostas a esta pergunta, o uso deste método garante que os valores de css herdados display e font-size são mantidos. Também não há necessidade de usar float e o incómodo clear isso é, então, necessário. Claro, você vai precisar de usar jQuery.

Para mim, é um problema irritante com que às vezes pode fazer você perder uma hora se perguntando Por que uma linha de caixas de controle, por exemplo, não estão todos alinhados corretamente.. Por isso, eu tive que ter um rápido google e eu mesmo verificar se havia uma regra css que eu não me lembrava... mas parece não. ([[2])

Quanto à próxima melhor resposta, de usar o tamanho da fonte... para mim isto é um um hack nojento que te vai morder mais tarde a perguntar-te porque é que a tua mensagem não está a aparecer.

Eu geralmente desenvolvo muito com PHP e no caso de onde eu estou gerando uma grade de opções, o conteúdo gerado por PHP remove este problema, uma vez que ele não insere qualquer espaçamento/pausas.

Simplesmente, eu sugeriria ter que lidar com as imagens todas em uma única linha juntos ou usando um script do lado do servidor para gerar o conteúdo/imagens.

Em vez de usar para remover um CR/LF entre os elementos, Eu uso a instrução de processamento SGML porque os minificadores frequentemente removem os comentários, mas não o XML PI. Quando o PHP PI é processado pelo PHP, ele tem o benefício adicional de remover o PI completamente junto com o CR / LF no meio, poupando pelo menos 8 bytes. Você pode usar qualquer nome de instrução arbitrário válido, como e salvar dois bytes em X (HT)ML.

White-space: initial; Works for me.

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>