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

Tenho uma página com uma linha de cerca de 10 imgs. Para facilitar a leitura do HTML, quero colocar uma quebra de linha entre cada imgtag, mas fazer isso renderiza espaços em branco entre as imagens, o que não desejo. Há algo que eu possa fazer além de quebrar no meio das tags, em vez de entre elas?

Edit: Aqui está uma imagem do que tenho até agora. Gostaria que as imagens da lombada do livro fossem exibidas em combinações aleatórias, usando PHP. É por isso que preciso de imgtags separadas .

Você pode usar CSS. Definir display: block ou float: left nas imagens permitirá que você defina seu próprio espaçamento e formate o HTML como quiser, mas afetará o layout de maneiras que podem ou não ser apropriadas.

Caso contrário, você está lidando com conteúdo embutido, então a formatação HTML é importante - já que as imagens funcionarão efetivamente como palavras.

Desculpe se isso é antigo, mas acabei de encontrar uma solução.

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

Não sei se isso funciona em todos os navegadores, mas tentei com o Chromium e alguns <li>elementos com display: inline-block;.

Você pode usar comentários.

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

Eu me preocuparia com a semântica de ter uma série de imagens lado a lado.

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

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

O Flexbox pode resolver facilmente esse antigo problema:

.image-wrapper {
  display: flex;
}

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

Depois de muita pesquisa, tentativa e erro, descobri uma maneira que parece funcionar bem e não requer redefinir manualmente o tamanho da fonte nos elementos filhos, permitindo-me ter um tamanho de fonte em em todo o documento .

No Firefox, isso é bastante simples, basta definir word-spacing: -1emno elemento pai. Por algum motivo, o Chrome ignora isso (e pelo que testei, ele ignora o espaçamento entre palavras, independentemente do valor). Portanto, além disso, acrescento letter-spacing: -.31emaos pais e letter-spacing: normalaos filhos. Esta fração de um em é o tamanho do espaço SOMENTE SE o tamanho do em for padronizado . O Firefox, por sua vez, ignora os valores negativos de espaçamento entre letras, portanto não os adiciona ao espaçamento entre palavras.

Eu testei isso no Firefox 13 (win / ubuntu, 14 no android), Google Chrome 20 (win / ubuntu), navegador Android no ICS 4.0.4 e IE 9. E estou tentado a dizer que isso também pode funcionar no Safari, mas eu realmente não sei ...

Aqui está uma demonstração http://jsbin.com/acucam

Cheguei muito tarde (acabei de fazer uma pergunta e achei thin na seção relacionada), mas acho que display: table-cell; é a melhor solução

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

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

o único problema é que não funciona no IE 7 e versões anteriores, mas isso pode ser corrigido com um hack

Use a folha de estilo CSS para resolver esse problema como o código a seguir.

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

texto alternativo http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7p7pgle3tdCaptureCaptureN8e5

Testando no Firefox 3.5 Final!

PS. seu html deve gostar disso.

<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á algo que eu possa fazer além de quebrar no meio das tags, em vez de entre elas?

Na verdade não. Como <img>s são elementos embutidos, os espaços entre esses elementos são considerados pelo renderizador HTML como espaços verdadeiros no texto - espaços redundantes (e quebras de linha) serão truncados, mas espaços únicos serão inseridos nos dados de caractere do elemento de texto.

Posicionar as <img>tags pode evitar isso, mas eu não aconselharia isso, pois isso significaria posicionar cada uma das imagens manualmente em alguma medida de pixel, o que pode ser muito trabalhoso.

Outra solução seria usar quebras de linha não convencionais em alguns espaços. Isso é semelhante às primeiras respostas e é uma forma alternativa de alinhar elementos. Também é uma técnica de otimização de super borda porque substitui os espaços em sua marcação por retornos de carro.

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

Observe que não há espaços em nenhum desses códigos. Os locais onde normalmente são usados ​​espaços em HTML são substituídos por retornos de carro. É menos prolixo do que usar comentários e espaços em branco, como recomendado por Paul de Vrieze.

Agradecemos a tech.co por essa abordagem.

espaço em branco: inicial; Funciona para mim.

O espaço em branco entre os elementos só é colocado lá pelo editor de HTML para fins de formatação visual. Você pode usar 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);

});

Isso separa os elementos filhos, limpa qualquer espaço em branco que permaneça antes de adicionar os elementos filhos novamente.

Ao contrário das outras respostas a esta pergunta, o uso desse método garante que o css displaye os font-sizevalores herdados sejam mantidos. Também não há necessidade de usar floate o complicado clearque é necessário. Claro, você precisará usar jQuery.

Pessoalmente, gosto da resposta aceita afirmando que não há maneira exata de fazer isso, não sem usar um truque de alguma forma.

Para mim, é um problema irritante, às vezes pode fazer você perder uma hora se perguntando por que uma fileira de caixas de seleção, por exemplo, não estão todas alinhadas corretamente. Portanto, eu tive que fazer um rápido Google para verificar se havia uma regra de css que não me lembrei ... mas parece que não :(

Quanto à próxima melhor resposta, de usar o tamanho da fonte ... para mim, este é um hack desagradável que irá mordê-lo mais tarde se perguntando por que seu texto não está aparecendo.

Eu geralmente desenvolvo muito com PHP e no caso de onde estou gerando uma grade de caixas de seleção, o conteúdo gerado em PHP elimina esse problema, pois não insere nenhum espaçamento / quebra.

Simplesmente, eu sugeriria ter que lidar com as imagens todas em uma única linha ou usar 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 geralmente 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, economizando pelo menos 8 bytes. Você pode usar qualquer nome de instrução válido arbitrário, como e salvar dois bytes em X (HT) ML.

Inspirado pela resposta de Quentin , você também pode colocar o> de fechamento próximo ao início da próxima tag.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

Semanticamente falando, não seria melhor usar uma lista ordenada ou não ordenada e, em seguida, estilizá-la apropriadamente usando CSS?

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

Usando CSS, você será capaz de estilizar da maneira que quiser e remover o espaço em branco entre os livros.