Altezza Della Riga Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | |

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 clic `Immagine nell`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.