Come calcolare l’altezza di un elemento in linea

Ho un elemento span con il seguente CSS:

 span.test { font-size: 20px; line-height: 1; } 

Perché l’altezza calcasting dello span sembra essere 22px? Da dove provengono questi 2 pixel extra?

inserisci la descrizione dell'immagine qui

È ansible renderlo alto 20px senza usare il inline-block ?

Ecco il semplice jsbin che ho usato per testare: http://jsbin.com/tigevecemoco/1/edit

La specifica CSS 2.1 dice:

10.6.1 Elementi in linea non sostituiti

La proprietà ‘altezza’ non si applica. L’altezza dell’area del contenuto dovrebbe essere basata sul carattere, ma questa specifica non specifica come.

Come succede, l’altezza, al contrario dell’altezza della linea, di un elemento in linea non sostituito ha un effetto molto scarso su qualsiasi altra cosa, quindi i browser sono abbastanza liberi di riportare qualsiasi numero a loro piace qui.

Tuttavia, un po ‘di reverse engineering può essere istruttivo.

Se guardiamo le metriche dei font per Times New Roman, vediamo la dimensione EM di 2048, WinAscent del 1825 e WinDescent di 443. Somma l’ascesa e la discesa, dividi per la dimensione EM, moltiplicata per la dimensione del carattere (20px) e rotonda al numero intero e otteniamo 22px.

Prendendo Arial come un altro font, abbiamo dimensioni EM di 2048, WinAscent del 1854 e WinDescent di 434. Ripeti il ​​calcolo e otteniamo nuovamente 22px.

Che dire di un font diverso? Tahoma ha dimensioni EM di 2048, WinAscent di 2049 e WinDescent di 423. Ripeti il ​​calcolo e questa volta riceviamo 24px. E presto, se provi il tuo JsBin con il font Tahoma, Firefox mostra effettivamente un’altezza di 24px.

Le metriche dei caratteri sopra riportate sono state ottenute dal caricamento dei caratteri in Type Light 3.2 .

Non conclusivo, ma un ragionevole suggerimento su come tutto funzioni.

È ansible renderlo alto 20px senza usare il blocco in linea?

Supponendo che quanto sopra sia corretto, dovresti essere in grado di ottenerlo utilizzando un carattere personalizzato e modificando le metriche dei font di quel tipo di carattere. Non mi piacerebbe prevedere gli effetti a catena di farlo però.

Non sono riuscito a trovare una risposta al perché è stato applicato. Ho trovato molti forum con la stessa domanda …

Ma come risposta alla tua richiesta:

È ansible renderlo alto 20px senza usare il blocco in linea?

Sono riuscito a farlo solo facendo galleggiare l’elemento. Sembra che perda tutto ciò che lo stava imbottendo … Quindi, impostare l’ line-height della line-height 20px specifici lo fa funzionare.

 span.test { font-size: 20px; line-height: 20px; float: left; } 
 A 

prova a usare

line-hieght: 1 ‘ è ereditato dal genitore. prova la propria altezza della linea.

Altezza linea MDN

perché l’altezza della linea dello span è inutile

Spero che questo ti aiuti.

Ho usato JS Bin http://jsbin.com/siqabekoloja/1/edit per risolvere il tuo problema. Sono stato in grado di renderlo coerente in IE, Chrome e Firefox. Credo che il problema sia che hai bisogno che l’elemento sia blocco e non un elemento in linea.

Spero che questo ti aiuti. Se vuoi che siano l’uno accanto all’altro, fallo semplicemente a sinistra oa destra.