Proprietà CSS line-height

Definizione e uso

L'attributo line-height imposta la distanza tra le righe (altezza della riga).

Nota:Non è permesso utilizzare valori negativi.

Spiegazione

Questa proprietà influisce sul layout della casella di riga. Quando applicata a un elemento bloccante, definisce la distanza minima tra le basi delle righe dell'elemento piuttosto che la distanza massima.

La differenza tra il valore calcolato di line-height e font-size (noto in CSS come 'spaziatura tra le righe') è divisa in due parti, che vengono aggiunte alla parte superiore e inferiore del contenuto di una riga di testo. La casella minima che può contenere questi contenuti è la casella di riga.

Il valore numerico originale specifica un fattore di scala, e i figli successivi erediteranno questo fattore di scala invece del valore calcolato.

Vedi anche:

Tutorial CSS:Testo CSS

Manuale HTML DOM:Proprietà lineHeight

Esempio

Impostare lo spazio tra le righe in percentuale:

p.piccola {line-height:90%}
p.grande {line-height:200%}

Prova tu stesso

(puoi trovare altri esempi nella parte inferiore della pagina)

Sintassi CSS

line-height: normale|number|length|initial|inherit;

Valore dell'attributo

Valore Descrizione
normale Predefinito. Impostare uno spazio tra le righe ragionevole.
number Impostare un numero, che verrà moltiplicato con la dimensione attuale del font per impostare lo spazio tra le righe.
length Impostare uno spazio tra le righe fisso.
% Percentuale di spaziatura tra le righe basata sulla dimensione attuale del font.
inherit Specificato che l'attributo line-height dovrebbe essere ereditato dal elemento genitore.

Dettagli tecnici

Valore predefinito: normale
Ereditarietà: sì
Versione: CSS1
Sintassi JavaScript: oggetto.style.lineHeight="2"

Esempio TIY

Impostare lo spazio tra le righe utilizzando un valore in percentuale
Questo esempio dimostra come utilizzare un valore in percentuale per impostare lo spazio tra le righe di un paragrafo.
Impostare lo spazio tra le righe utilizzando un valore in pixel
Questo esempio dimostra come utilizzare un valore in pixel per impostare lo spazio tra le righe di un paragrafo.
Impostare lo spazio tra le righe utilizzando un numero
Questo esempio dimostra come utilizzare un numero per impostare lo spazio tra le righe di un paragrafo.

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0