Line-height - Trucchi CSS | CSS Almanac 2025

La line-heightproprietà definisce la quantità di spazio sopra e sotto gli elementi in linea. Ovvero, gli elementi impostati su display: inlineo display: inline-block. Questa proprietà viene spesso utilizzata per impostare l'interlinea per le righe di testo.

p ( line-height: 1.5; )

La line-heightproprietà può accettare i valori delle parole chiave normaloppure noneun numero, una lunghezza o una percentuale.

Secondo le specifiche, un valore di "normale" non è solo un singolo valore concreto che viene applicato a tutti gli elementi, ma calcola piuttosto un valore "ragionevole" a seconda della dimensione del carattere impostata (o ereditata) sull'elemento.

Un valore di lunghezza può essere definito utilizzando qualsiasi unità CSS valida (px, em, rem, ecc.).

Un valore percentuale è la dimensione del carattere dell'elemento moltiplicata per la percentuale. Per esempio:

Dai un'occhiata a questa penna!

Nella demo sopra, i tre paragrafi hanno le loro altezze di riga impostate rispettivamente su 150%, 200% e 250%. L'elemento body ha la dimensione del carattere definita a 20 px. Ciò significa che le altezze di riga calcolate per i paragrafi sono rispettivamente 30px, 40px e 50px.

Unitless Line Heights

Il metodo consigliato per definire l'altezza della linea utilizza un valore numerico, indicato come altezza della linea "senza unità". Un valore numerico può essere qualsiasi numero, incluso un numero in base decimale, come viene utilizzato nel primo esempio di codice in questa pagina.

Le altezze di riga senza unità sono consigliate poiché gli elementi figlio erediteranno il valore numerico non elaborato, anziché il valore calcolato. In questo modo, gli elementi figlio possono calcolare le loro altezze di riga in base alla dimensione dei caratteri calcolata, invece di ereditare un valore arbitrario da un genitore che è più probabile che debba essere sovrascritto.