altezza rispetto allo stile linea altezza

Question

Qual è la differenza tra l'utilizzo di questi due quando si tratta di testo che non sarà mai più di una singola riga? Entrambi possono produrre risultati simili sullo schermo da quello che posso vedere riguardo agli elementi in cima o in fondo all'elemento. Perché usare l'altezza della linea, se è così? L'altezza avrebbe più senso da usare.

Modifica: un esempio di questo è un pulsante stilizzato creato da un div con il testo all'interno. Questo non sarà mai multilinea. Quindi sarebbe necessaria l'altezza della linea per motivi di compatibilità? o qualcosa di cui non so nulla?

Grazie!

Answer 1

height è la misura verticale del contenitore.

line-height è la distanza dalla parte superiore della prima riga di testo all'inizio del secondo.

Se utilizzato con una sola riga di testo, mi aspetterei che producessero risultati simili nella maggior parte dei casi.

Io uso height quando voglio impostare in modo esplicito la dimensione del contenitore e line-height per il layout tipografico, dove potrebbe essere rilevante se l'utente ridimensiona il testo.

Answer 2

Per scopi pratici nel caso in cui si citi (senza mai spostarsi su più di una linea) l'altezza della linea centrerà verticalmente il testo. Prestare attenzione a questo presupposto anche se l'utente in ultima analisi controlla la dimensione del carattere.

Answer 3

Se si avvolge il testo in un div, si assegna all'altezza div e il testo diventa 2 righe (forse perché viene visualizzato su uno schermo piccolo come un telefono) quindi il testo si sovrapporrà agli elementi sotto di esso. D'altra parte, se si assegna al div un line-height e il testo cresce a 2 linee, il div si espande (assumendo che non si dia anche un'altezza div).

Ecco un fiddle che dimostra questo.

Answer 4

Supponendo che il testo è più piccolo del contenitore:

Impostando la linea di altezza sul contenitore specifica l'altezza minima della linea-box interni esso. Per 1 riga di testo, questo risulta nel testo verticalmente centrato all'interno del contenitore.

Se si imposta l'altezza sul contenitore, il contenitore crescerà verticalmente, ma il testo al suo interno inizierà sulla prima riga (in alto) al suo interno.

Answer 5

altezza = line-height + padding-top + padding-bottom