Perché i piccoli spazi continuano a comparire nelle mie pagine Web?

Question

Questa potrebbe essere una domanda stupida ma se c'è un modo migliore o corretto per farlo, mi piacerebbe impararlo.

L'ho incontrato diverse volte, anche di recente, in cui vengono visualizzati piccoli spazi nella versione renderizzata della mia pagina HTML. Intuitivamente penso che questi non dovrebbero essere lì perché al di fuori del testo o delle entità la formattazione dell'HTML di una pagina non dovrebbe importare ma a quanto pare lo è.

Ciò a cui mi riferisco è questo: ho alcuni file di Photoshop dal client su come vogliono che il loro sito appaia. Vogliono che appaia sostanzialmente pixel perfetto per l'immagine in questo file.

Uno dei punti nella pagina richiede una barra dei menu, in cui ognuno fa il cambio nel passaggio del mouse, si comporta come un collegamento ipertestuale, ecc. Nel file Photoshop questa è una barra lunga, quindi un modo economico e semplice per fare questo è solo per dividere quel segmento in più immagini e poi posizionarli uno accanto all'altro nel file.

Così istintivamente lo dispongo in questo modo (c'è di più ma questo è l'essenza)

<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 così via.

Il problema è che le immagini hanno questo piccolo spazio tra loro che è inaccettabile dal momento che il cliente vuole che questa cosa sia perfetta per i pixel (e semplicemente sembra cattiva).

Un modo per renderlo correttamente è rimuovere i ritorni a capo tra le immagini

<*>

Il che rende le immagini una contro l'altra (l'effetto desiderato) ma rende la linea incredibilmente lunga e il codice più difficile da mantenere (si avvolge qui in SO e questa è una versione semplificata - quella reale ha più tempo nomi di file e JavaScript spruzzati per eseguire il passaggio del mouse).

Mi sembra che ciò non dovrebbe accadere, ma sembra che il ritorno a capo in HTML sia reso come un piccolo spazio vuoto. E questo succede in tutti i browser, sembra.

Ho ragione o torto nel pensare che i due frammenti sopra dovrebbero rendere lo stesso? E c'è qualcosa che sto facendo di sbagliato? Forse salvando il file con una codifica errata? Dovrei invece rendere ognuno di questi collegamenti un elemento CSS perfettamente posizionato?

Answer 1

Lo spazio bianco (ritorno a capo incluso) viene solitamente visualizzato come spazio in tutti i browser.

Devi mettere gli elementi uno dopo l'altro, ma puoi usare un trucco:

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

Anche questo sembra un po 'brutto, ma è comunque meglio di una sola riga. È possibile modificare la formattazione, ma l'idea è quella di aggiungere ritorni a capo all'interno degli elementi e non tra di essi.

Answer 2

Non so se questo sia abbastanza generale per la tua pagina, ma potresti classificare questi particolari tag a e spostarli tutti a sinistra, quindi si raggrupperanno indipendentemente dal tuo HTML formattato.

<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

Fa parte della specifica HTML: gli spazi sono nel markup, quindi sono considerati parte del documento.

Le uniche altre opzioni che hai, visto che non ti piace la formattazione, sono di rompere i tag html:

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

che è indesiderabile secondo me, o creare l'html in modo dinamico - tramite JavaScript o usando un sistema di template e html dinamico.

Answer 4

Il motivo è semplice: in HTML lo spazio bianco è importante, ma solo una volta. Lo spazio bianco ripetuto viene ignorato, viene mostrato solo il primo.

L'unico modo affidabile per evitarlo è, come hai fatto tu, non lasciando spazi bianchi tra gli elementi.

Quando il layout basato su tabella sarebbe meno fuori di quello che è attualmente, potresti usare una tabella di riempimento zero con bordo zero per allineare i tuoi elementi mentre li disponi su linee separate nel codice sorgente.

Answer 5

Il modo in cui lo gestisco è utilizzare un elenco non ordinato e rendere ogni immagine / collegamento un elemento. Quindi utilizza CSS per visualizzare ogni elemento in linea e spostarli a sinistra.

Questo ti darà molta più flessibilità e renderà il markup molto leggibile.

Answer 6

Il comportamento che hai dimostrato sopra è vero in quanto il browser considera i ritorni a capo come uno spazio. Per risolverlo, puoi modellarlo in questo modo con:

a { display: block; float: left; }

Tieni presente che la regola di cui sopra si applica a tutti i link, quindi potresti voler restringere il selettore solo a determinati elementi, ovvero:

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

Answer 7

Se hai intenzione di fare un'interfaccia a schede su un sito Web, fai tutto il possibile per farlo correttamente e ne varrà la pena. Esistono molti siti Web con ottimi esempi di implementazioni di schede CSS. Prendi in considerazione l'utilizzo di uno di essi.

Questo ha molte schede CSS + Javascript / AJAX. Oppure vedi questa serie di semplici esempi CSS (alcuni in stile). Infine, dai un'occhiata a questo generatore di schede davvero interessante.