Rimozione di spazi tra gli elementi HTML quando si utilizzano interruzioni di riga

Ho una pagina con una riga di circa 10 imgs. Per la leggibilità dell'HTML, voglio inserire un'interruzione di riga tra ogni imgtag, ma così facendo si rende lo spazio bianco tra le immagini, cosa che non voglio. C'è qualcosa che posso fare oltre a rompere nel mezzo dei tag piuttosto che tra di loro?

Modifica: ecco uno screenshot di quello che ho finora. Vorrei che le immagini del dorso del libro venissero visualizzate in combinazioni casuali, utilizzando PHP. Questo è il motivo per cui ho bisogno di imgtag separati .

Potresti usare CSS. L'impostazione di display: block, o float: left sulle immagini ti consentirà di definire la tua spaziatura e formattare l'HTML come preferisci, ma influenzerà il layout in modi che potrebbero o non potrebbero essere appropriati.

Altrimenti hai a che fare con contenuto in linea, quindi la formattazione HTML è importante, poiché le immagini agiranno effettivamente come parole.

Scusa se è vecchio ma ho appena trovato una soluzione.

Prova a impostare font-sizea 0. Quindi gli spazi bianchi tra le immagini avranno una larghezza pari a 0 e le immagini non saranno influenzate.

Non so se funziona in tutti i browser, ma l'ho provato con Chromium e alcuni <li>elementi con display: inline-block;.

Potresti usare i commenti.

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

Tuttavia, mi preoccuperei della semantica dell'avere una serie di immagini una accanto all'altra.

Hai due opzioni senza fare cose approssimative con i CSS. La prima opzione è usare javascript per rimuovere i figli di soli spazi bianchi dai tag. Un'opzione più interessante è però quella di utilizzare il fatto che gli spazi possono esistere all'interno dei tag senza che abbiano un significato. Così:

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

Flexbox può facilmente risolvere questo vecchio problema:

.image-wrapper {
  display: flex;
}

Maggiori informazioni su flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dopo troppe ricerche, tentativi ed errori ho trovato un modo che sembra funzionare bene e non richiede di reimpostare manualmente la dimensione del carattere manualmente sugli elementi figli, permettendomi di avere una dimensione del carattere em standardizzata nell'intero documento .

In Firefox questo è abbastanza semplice, basta impostare word-spacing: -1eml'elemento genitore. Per qualche motivo, Chrome lo ignora (e per quanto ho testato, ignora la spaziatura delle parole indipendentemente dal valore). Quindi oltre a questo aggiungo letter-spacing: -.31emai genitori e letter-spacing: normalai figli. Questa frazione di em è la dimensione dello spazio SOLO SE la tua dimensione em è standardizzata . Firefox, a sua volta, ignora i valori negativi per la spaziatura delle lettere, quindi non lo aggiunge alla spaziatura delle parole.

L'ho provato su Firefox 13 (win / ubuntu, 14 su android), Google Chrome 20 (win / ubuntu), Android Browser su ICS 4.0.4 e IE 9. E sono tentato di dire che potrebbe funzionare anche su Safari, ma non lo so davvero ...

Ecco una demo http://jsbin.com/acucam

Sono in ritardo (ho appena fatto una domanda e trovo thin nella relativa sezione) ma penso che display: table-cell; è una soluzione migliore

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

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

l'unico problema è che non funzionerà su IE 7 e versioni precedenti, ma è risolvibile con un hack

Usa il foglio di stile CSS per risolvere questo problema come il codice seguente.

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

testo alternativo http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2yCollezione08

Test su Firefox 3.5 finale!

PS. il tuo html dovrebbe essere così.

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

C'è qualcosa che posso fare oltre a rompere nel mezzo dei tag piuttosto che tra di loro?

Non proprio. Poiché <img>s sono elementi in linea, gli spazi tra questi elementi sono considerati dal renderizzatore HTML come veri spazi nel testo: gli spazi ridondanti (e le interruzioni di riga) verranno troncati ma i singoli spazi verranno inseriti nei dati carattere dell'elemento di testo.

Il posizionamento dei <img>tag può assolutamente impedirlo, ma lo sconsiglio poiché ciò significherebbe posizionare manualmente ciascuna delle immagini su una misura di pixel che può richiedere molto lavoro.

Un'altra soluzione sarebbe quella di utilizzare interruzioni di riga non convenzionali nei luoghi degli spazi. Questo è simile alla prima coppia di risposte ed è un modo alternativo per allineare gli elementi. È anche una tecnica di ottimizzazione super-edge perché sostituisce gli spazi nel markup con ritorni a capo.

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

Notare che non ci sono spazi in nessuno di quel codice. I punti in cui gli spazi vengono normalmente utilizzati in HTML vengono sostituiti con ritorni a capo. È meno prolisso sia dell'uso dei commenti che dell'uso degli spazi bianchi come consigliato da Paul de Vrieze.

Ringraziamo tech.co per questo approccio.

spazio bianco: iniziale; Per me va bene.

Lo spazio vuoto tra gli elementi viene inserito dall'editor HTML solo per scopi di formattazione visiva. Puoi usare jQuery per rimuovere gli spazi:

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

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

});

Questo scollega gli elementi figlio, cancella qualsiasi spazio vuoto rimanente prima di aggiungere di nuovo gli elementi figlio.

A differenza delle altre risposte a questa domanda, l'utilizzo di questo metodo garantisce il mantenimento del css displaye dei font-sizevalori ereditati . Non c'è nemmeno bisogno di usare floate l'ingombrante clearche è poi richiesto. Ovviamente dovrai usare jQuery.

Personalmente mi piace la risposta accettata che afferma che non esiste un modo esatto per farlo, non senza usare un trucco di qualche forma.

Per me, è un problema fastidioso che a volte può farti perdere un'ora chiedendoti perché una fila di caselle di controllo, ad esempio, non sono tutte allineate correttamente .. Quindi ho dovuto controllare rapidamente Google e io stesso se c'era una regola CSS che non ho ricordato ... ma sembra no :(

Per quanto riguarda la prossima migliore risposta, l'uso della dimensione del carattere ... per me questo è un brutto trucco che ti morderà in seguito chiedendoti perché il tuo testo non viene visualizzato.

Generalmente sviluppo molto con PHP e nel caso in cui sto generando una griglia di caselle di controllo, il contenuto generato da PHP rimuove questo problema in quanto non inserisce alcuna spaziatura / interruzione.

Semplicemente, suggerirei di dover gestire le immagini che si trovano tutte su una singola riga insieme o di utilizzare uno script lato server per generare il contenuto / le immagini.

Invece di utilizzare per rimuovere un CR / LF tra gli elementi, utilizzo l'istruzione di elaborazione SGML perché i minificatori spesso rimuovono i commenti, ma non l'XML PI. Quando PHP PI viene elaborato da PHP, ha l'ulteriore vantaggio di rimuovere completamente il PI insieme al CR / LF in mezzo, risparmiando così almeno 8 byte. È possibile utilizzare qualsiasi nome di istruzione valido arbitrario come e salvare due byte in X (HT) ML.

Ispirato dalla risposta di Quentin , puoi anche inserire la chiusura> accanto all'inizio del tag successivo.

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

Semanticamente parlando, non sarebbe meglio usare un elenco ordinato o non ordinato e poi modellarlo in modo appropriato usando i 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, sarai in grado di modellarlo come preferisci e rimuovere lo spazio bianco tra i libri.