La proprietà CSS line-height determina l`altezza della linea di vari elementi HTML. È comunemente usato per definire la distanza tra le righe di testo. L`altezza della linea può essere impostata con l`ausilio di parole: chiavi, percentuali o valori numerici.
La proprietà CSS line-height consente agli sviluppatori di impostare lo spazio tra due elementi inline su una pagina web. Gli sviluppatori utilizzano spesso la proprietà CSS line-height per aumentare o diminuire la distanza tra le righe di testo di una pagina Web.
Questo tutorial spiega come utilizzare la proprietà CSS line-height. Faremo riferimento a un esempio per iniziare. Al termine della lettura di questo tutorial, avrai una buona comprensione dell`utilizzo della proprietà line-height nel tuo codice.
CSS Line-height
La proprietà CSS line-height definisce l`altezza di una casella di riga. Le aree di linea sono le linee che compongono un`area in CSS . Questo metodo viene spesso utilizzato per definire la distanza tra le righe di testo.
La regolazione dell`altezza delle righe consente di regolare indirettamente la spaziatura tra le righe di testo (o altri elementi) su una pagina web. È molto simile alla formattazione del testo in Microsoft Word con spaziatura doppia o 1,15.
La sintassi della proprietà CSS line-height è la seguente:
"lineHeight" si riferisce a un valore di lunghezza che definisce l`altezza di un elemento.
Tre tipi di valori che puoi usare con la proprietà line-height sono lunghezza, numero e percentuale:
Valore
Descrizione
Valori di esempio ‚ Äã‚Äã
Risultato di Valori di esempio ‚Äã‚Äã
Lunghezza
Definisce l`altezza della linea utilizzando un`unità di misura specifica (come em, px e cm).
10 px, 15 px, 20 px
Se specifichi 10 px, l`altezza della linea sarà 10 px.
Numero
Imposta l`altezza della linea su un multiplo della dimensione del carattere.
1, 1,8, 2
Se la dimensione del carattere è 10 px, l`altezza della riga sarà rispettivamente di 10 px, 18 px e 20 px.
percentuale
Definisce l`altezza della riga come percentuale della dimensione del carattere dell`elemento .
30%, 50%, 110%
Se la dimensione del carattere è 10px, l`altezza della riga sarà rispettivamente di 3px, 5px e 11px.
In alternativa, puoi specificare la parola chiave "normale".‚" Questa parola chiave specifica l`uso del browser predefinito. Questo valore è solitamente intorno a 1.2, a seconda del browser utilizzato dall`utente.
Se applichi la proprietà line-height a una casella, tutto il testo in quella casella utilizzerà l`altezza della casella .line che hai specificato.
Una nota sull`accessibilità
Cambiare la riga la spaziatura è un uso comune della proprietà line-height. Questo perché vuoi sempre assicurarti che ci sia abbastanza spazio tra le righe. Se non c`è abbastanza spazio tra le righe, il testo potrebbe essere difficile da leggere.
un testo di difficile lettura ha un effetto particolarmente grave sui non vedenti. L`accessibilità dovrebbe essere sempre presa in considerazione quando si crea un sito web.
Quando si utilizza un numero per impostare l`altezza della riga di un elemento in CSS, dovresti d non utilizzare valori ‚Äã‚Äãinferiori a 1,5. Questo perché valori di altezza riga ‚Äã‚Äãinferiori a 1,5 possono rendere il tuo sito più difficile da usare per i lettori ipovedenti.
Esempio CSS per altezza riga
Supponiamo che tu stia progettando un " Chi siamo‚" Pagina per un sito web di un club di cucina locale. La pagina contiene un`intestazione seguita da un paragrafo di testo che descrive una descrizione del locale.
Vogliamo che il nostro testo sia adeguatamente distanziato. Quindi decidiamo di imposta l`altezza della riga del paragrafo di testo sulla pagina Web a 1,6 rem. Possiamo farlo usando questo codice:
Il nostro codice restituisce: Fai clicnell`editor di codice qui sopra per vedere l`output del nostro codice HTML/CSS.
Nel nostro file HTML, abbiamo definito un`intestazione "Chi siamo" utilizzando un tag
. Quindi abbiamo scritto una descrizione di Fantastic Chefs e l`abbiamo inclusa nel HTML tag .
Nel nostro file CSS, abbiamo definito una regola. La nostra regola utilizza due proprietà CSS. Impostiamo l`altezza della riga su 1.6rem e la dimensione del carattere a 16px per tutti i
tag HTML.
L`unità di misura "rem" usata con la proprietà line-height definisce un`altezza di riga relativa alla dimensione del carattere dell`elemento radice. "rem" significa "elemento radice". Quindi, poiché la dimensione del nostro carattere era 16px, l`altezza della riga di questo paragrafo di testo era 25,6px (16px * 1,6).
Il testo nel paragrafo precedente è ben distanziato e non sovrapposizione.
Potremmo anche applicare l`altezza della riga al nostro elemento sui valori ‚Äã‚Äãwe specificato. Ciò significherebbe che i nostri titoli e il nostro
tag sarebbero interessati.
Conclusione
La linea CSS-hei La proprietà ght definisce l`altezza di una casella di linea. In genere, questa proprietà viene utilizzata per impostare la spaziatura tra le righe di testo in un paragrafo o un`intestazione. L`altezza della riga può essere impostata utilizzando la normale parola chiave, una percentuale, una lunghezza o un valore numerico.
Questo tutorial ha discusso le basi della proprietà CSS dell`altezza della riga e come puoi usarla nel codice. Ora hai le conoscenze per iniziare a utilizzare la proprietà CSS line-height come un esperto!
Vuoi diventare uno sviluppatore web? Consulta la nostra Guida all`apprendimento CSS per consigli di esperti e suggerimenti sulle migliori risorse di apprendimento e corsi.
nell`editor di codice qui sopra per vedere l`output del nostro codice HTML/CSS.