In questo post vedremo come si può gestire la spaziatura dei testi con CSS. Queste proprietà vengono tutte ereditate di default.
line-height
La proprietà line-height imposta la distanza tra le linee del testo. Il valore iniziale è normal, che di solito viene stampata a schermo al 120% di grandezza rispetto al font. Questa proprietà può anche essere impostata su length, una percentuale determinata dalla grandezza del font, oppure da un numero senza dimensione che viene moltiplicato con la grandezza del font.
line-height : inherit | normal | <length> | <percentage> | <number>
La proprietà line-height eredita il modo predefinito per impostare l'altezza della linea
usando un numero senza dimensione.
L'impostazione dell'altezza della linea, come lunghezza o percentuale, può avere risultati imprevisti per gli elementi figlio che usano caratteri di dimensioni diverse, questo perché l'altezza della linea ereditata viene corretta rispetto alla dimensione del carattere dell'elemento figlio.
line-height : 1.5;
La proprietà line-height non ha effetto sugli elementi rimpiazzati dagli elementi inline, come ad esempio <img>. Quando la proprietà viene utilizzata su altri tipi di elementi inline, imposta l'altezza della linea correttamente. Per gli elementi blocco, line-height imposta l'altezza minima della linea dei box dentro l'elemento.
word-spacing and letter-spacing
La proprietà word-spacing imposta lo spazio tra le parole, mentre letter-spacing imposta lo spazio tra le singole lettere. I valori negativi sono ammessi per entrambe le proprietà.
word-spacing : inherit | normal | <length>
letter-spacing : inherit | normal | <length>
Nel seguente esempio la regola crea 5 pixel di distanza tra le lettere e 8 pixel di distanza tra le parole all'interno del titolo H1:
h1 {
letter-spacing: 5px;
word-spacing: 8px;
}
white-space
La proprietà white-space cambia il modo di gestire gli spazi bianchi tra i caratteri all'interno del blocco di un elemento.
white-space (block) : inherit | normal | nowrap | pre | pre-wrap | pre-line
Molteplici spazi bianchi tra i caratteri, vengono normalmente collassati all'interno di un singolo carattere in HTML, mentre il testo viene compresso al fine di contenere la larghezza del blocco dell'elemento contenitore.
p { white-space: normal; }
L'impostazione degli spazi vuoti con nowrap, impedisce al testo l'accorpamento di qualsiasi cosa di diverso dal tag di interruzione di riga <br>. Anche il valore pre (preformattato) impedisce l'accorpamento, oltre a preservare tutti i caratteri degli spazi bianchi. Il suo comportamento è lo stesso dell'elemento <pre> in HTML.
I valori pre-wrap e pre-line consentono al testo di accorparsi; con pre-wrap si preserva la sequenza degli spazi bianchi, mentre con pre-line vengono collassati.
La differenza tra pre-line e normal è che pre-line conserva i caratteri a capo.
