caratteri di formattazione Perché sono come CRLF essere resi da alcuni browser come spazi bianchi?

Question

Ho bisogno di qualcuno di spiegare a me dove questo chilo in più viene da sul div che contengono elementi img.

Si può andare a http://www.dev12.com/CSSTest per gli esempi vivi di i miei due problemi.

Problema # 1 : Safari, Firefox e Opera rendono circa 6 pixel di padding inferiore indesiderato sulla div contenitore. Non importa se ho impostato in modo esplicito imbottitura per 0px.

Problema # 2 : Se ho formato il mio codice in modo che ogni immagine è su di essa la propria linea nel mio file html, un ulteriore 6 pixel di padding a destra vengono aggiunti a ciascuna immagine. Ad esempio, il seguente blocco di codice rende imbottitura indesiderato tra le due immagini:

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

Tuttavia, questo blocco di codice non ha lo spazio indesiderato:

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

Ovviamente Safari, Firefox e Opera sono rendering mio ritorno a capo tra il tag span come spazi vuoti. Non ricordo mai avere questo problema prima. Sto scrivendo il mio codice in TextMate. C'è un'impostazione dovrei guardare per evitare questo?

Io uso sempre il doctype Strict XHTML 1.0. Ciò è particolarmente confuso per me, perché è così rudimentale. Qualcuno mi aiuta a capire questo!

KN

Answer 1

# 1 Questo perché l'allineamento predefinito di base di immagini in linea - lo spazio extra che stai vedendo è riservato ai discendenti (lettere che vanno al di sotto della linea di base: g, p, q, y, ecc) nel testo che circonda le immagini. (Il fatto che non si ha il testo è irrilevante -. Spazio per loro è ancora riservata)

È possibile liberarsi di esso in questo modo:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

# 2 a capo sono spazi bianchi, e ottenere visualizzati come spazi. Se aveste HTML in questo modo:

<p>This is a sentence
in a paragraph.<p>

che ci si aspetta il browser di mettere uno spazio tra "sentenza" e "in", non è vero? <img> elementi sono blocchi in linea, proprio come le parole in un paragrafo.

Answer 2

Se non ricordo male, le specifiche HTML dicono che qualsiasi e tutti gli spazi nel file sorgente sarà reso come un unico spazio bianco.

Ad esempio, se si apre un nuovo documento HTML e tipo

hello
world

Il risultato sarà "ciao mondo"

apparirà lo stesso risultato per una delle seguenti:

hello


world

------ o ----------

hello world

------ o ----------

hello                                                 world

Indipendentemente da quanto spazio bianco si mette tra il "ciao" e "mondo" un solo renderà. Non importa se lo spazio bianco è un CRLF o un carattere di spazio.