Proprietà CSS line-height
Usa la proprietà CSS line-height per specificare l'altezza delle righe del testo. Definizione, valori ed esempi.
La proprietà line-height specifica l'altezza di un box di riga, controllando la spaziatura verticale tra le righe di testo. È una delle proprietà più importanti per la leggibilità: righe troppo ravvicinate sono difficili da scorrere, mentre righe troppo distanziate rendono un paragrafo frammentato.
Questa pagina tratta la sintassi, ogni tipo di valore accettato, il motivo per cui i valori senza unità sono di solito la scelta corretta, e le insidie legate all'accessibilità e all'ereditarietà da tenere a mente.
line-height si comporta in modo diverso a seconda del tipo di elemento:
- Sugli elementi a livello di blocco, la proprietà
line-heightimposta l'altezza minima dei box di riga all'interno dell'elemento. - Sugli elementi inline non sostituiti, imposta l'altezza usata nel calcolo dell'altezza del box di riga.
- Sugli elementi inline sostituiti come i pulsanti o altri elementi input,
line-heightin genere non influisce sul calcolo dell'altezza del box di riga.
I valori negativi sono validi.
L'altezza di riga predefinita è circa il 110%–120% per la maggior parte dei browser.
La proprietà line-height imposta l'interlinea delle righe di un testo. Se il valore di line-height è maggiore del valore di font-size di un elemento, la differenza sarà l'interlinea del testo.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | Sì. |
| Animabile | Sì. L'altezza delle righe è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.lineHeight = "40px"; |
Sintassi
Sintassi della proprietà CSS line-height
line-height: normal | number | length | percentage | calc | initial | inherit;Esempio con valore normal:
Esempio della proprietà CSS line-height con valore normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Risultato
Esempio con valore length:
Esempio della proprietà CSS line-height con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br /> The line height here is set to 10 pixels.
</div>
</body>
</html>Esempio con valore percentage:
Esempio della proprietà CSS line-height con valore %(percentuale)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
</body>
</html>Esempio con valori multipli:
Esempio della proprietà CSS line-height con valori cm, px, %(percentuale), normal e number
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br /> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br /> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Scegliere un valore: senza unità vs. con unità
Questa è la decisione più importante quando si imposta line-height, e dipende da come il valore viene ereditato:
- Un numero senza unità (es.
line-height: 1.5) viene ereditato come il fattore stesso. Ogni discendente moltiplica il fattore per il propriofont-size, quindi la spaziatura si scala sempre correttamente. - Una lunghezza o percentuale (es.
1.5emo150%) viene calcolata una sola volta sull'elemento in cui è dichiarata e il valore in pixel risultante viene ereditato. I discendenti con unfont-sizediverso mantengono quell'altezza fissa in pixel, il che può causare la sovrapposizione del testo.
Confronta i due su un elemento genitore il cui figlio ha un font più grande:
<!DOCTYPE html>
<html>
<head>
<style>
/* Recommended: each element scales the factor by its own font-size */
.good { line-height: 1.5; }
/* Problematic: computed pixel height is inherited as-is */
.bad { line-height: 150%; }
.child { font-size: 3em; }
</style>
</head>
<body>
<div class="good">
Parent text. <span class="child">Big inherited line scales fine.</span>
</div>
<div class="bad">
Parent text. <span class="child">Big inherited line may overlap.</span>
</div>
</body>
</html>Regola pratica: usa un numero senza unità per il testo del corpo. Ricorri a una lunghezza fissa (px/em) solo quando vuoi deliberatamente un box di riga costante, ad esempio per centrare verticalmente una singola riga di testo facendo corrispondere line-height all'altezza dell'elemento.
Accessibilità
Il criterio di successo text-spacing WCAG 1.4.12 si aspetta che il contenuto rimanga leggibile quando gli utenti aumentano la spaziatura delle righe ad almeno 1,5 volte la dimensione del font. Un valore line-height senza unità pari a 1.5 o superiore sul testo del corpo è un'impostazione predefinita sicura e accessibile, e consente di evitare layout rotti quando un utente applica la propria spaziatura.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| normal | Definisce un'altezza di riga normale. È il valore predefinito di questa proprietà. | Prova » |
| length | Definisce un'altezza di riga fissa in px, cm, em, ecc. | Prova » |
| number | Definisce un numero che viene moltiplicato per la dimensione del font corrente per impostare l'altezza di riga. | Prova » |
| % | Definisce un'altezza di riga in percentuale della dimensione del font corrente. | Prova » |
| calc | Definisce un'altezza di riga tramite un calcolo. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Nota: L'uso dell'unità em è ampiamente consigliato per altezze di riga scalabili.