Interlinea CSS: soluzioni
Molto spesso, i progettisti principianti hanno problemi a padroneggiare i fogli di stile a cascata (CSS). Nessuna eccezione funziona con interlinea in CSS. L'interlinea è la distanza tra le linee verticalmente. Come in un normale documento di Microsoft Word, questo parametro può anche essere modificato nel testo del file html.
Usa l'altezza della linea quando cambi spaziatura
La prima e più corretta soluzione al problema a intervalli sarebbe quella di impostare il valore per la proprietà line-height. Per impostazione predefinita, il valore di questa proprietà è normale (altezza riga: normale;). L'interlinea viene calcolata automaticamente dal browser Internet stesso e dipende, in particolare, dal tipo di carattere, nonché dalla sua dimensione. Qualsiasi valore numerico positivo che verrà impostato nella proprietà di stile dell'altezza della linea verrà percepito dal browser come un numero in base al quale la dimensione del carattere corrente deve essere moltiplicata.
Nei CSS, l'interlinea può essere specificata in diverse unità di lunghezza: punti (pt), pollici (pollici), pixel (px) e percentuali (%). La percentuale viene calcolata rispetto al carattere corrente e, per impostazione predefinita, il suo valore è 100%. Non dimenticare che la proprietà line-height prende in prestito il valore della proprietà inherit dal suo elemento padre.
Ecco alcuni esempi di come aumentare l'interlinea nel CSS:
.
Il processo di lavorare con l'interlinea è abbastanza semplice. Dovresti avere una conoscenza di base dei CSS e la possibilità di connettere il file alla pagina html principale. Gli stili possono anche essere impostati direttamente sulla pagina html:
Per fare un intervallo a metà in questa frase, è necessario aggiungere il seguente codice nel file CSS:
p.stroka {
altezza della linea: 1,5;
}
Per fare un doppio intervallo, puoi scrivere il seguente codice:
p.stroka {
altezza della linea: 2;
}
o
p.stroka {
altezza della linea: 200%;
}
In entrambi i casi, il browser capirà che è necessario moltiplicare il carattere corrente per 2. Questo valore sarà l'interlinea.
Ora diamo un esempio di come ridurre l'interlinea (CSS):
È importante ricordare che il valore negativo dell'altezza della linea non viene semplicemente percepito, quindi il suo valore minimo può essere 0. Per ottenere un intervallo di metà, è necessario scrivere il seguente codice:
p.line {
altezza della linea: 0,5;
}
o
p.line {
altezza della linea: 50%;
}
o
p.line {
altezza della linea: 2;
}
o
p.line {
altezza della linea: 0,5 pt;
}
Tutte e 3 le opzioni sono corrette e conformi a tutti gli standard W3C, rispettivamente, funzioneranno in qualsiasi versione del browser.
Utilizzare il padding quando si modifica la spaziatura
Tuttavia, oltre a modificare la proprietà line-height, c'è un altro modo per modificare l'interlinea in CSS, sarà un "gioco" con i valori della proprietà padding. La proprietà di stile di padding è responsabile del rientro in qualsiasi oggetto html. Per impostazione predefinita, questa proprietà è 0. Selezionando valori diversi, è possibile modificare l'interlinea, ad esempio:
.
Lavorare con l'interlinea è facile. È sufficiente conoscere le basi del CSS ed essere in grado di connettere il file alla pagina html principale. Puoi anche impostarlo direttamente sulla pagina con l'estensione html.
Per aumentare l'interlinea, aumentare il valore della proprietà:
p.second {
imbottitura: 10px;
}
Quindi, la distanza tra le linee nel nostro paragrafo sarà aumentata di 10 pixel rispetto all'inizio. Con lo stesso successo è possibile ridurre l'interlinea, prescrivendo ad esempio:
p.second {
imbottitura: 0px;
}
Interlinea negativa
Se si nota, non è inoltre consentito immettere valori negativi in modo che le stringhe non si sovrappongano l'una all'altra. Nei CSS, l'interlinea non può essere negativa. In termini di aderenza alle regole della scrittura del codice e degli standard W3C, non è mai possibile scrivere valori negativi nei valori di spaziatura della linea.
Variazione dell'interlinea nelle liste
A volte c'è un compito per cambiare l'interlinea negli elenchi.
- e
- . I metodi precedenti non porteranno al risultato desiderato, ma esiste una proprietà che può modificare l'intervallo nell'elenco: questa proprietà è il margine. Questa proprietà di stile può essere positiva o negativa. Cerchiamo di mostrare il cambiamento nella spaziatura della linea nella lista con l'esempio:
Per aumentare il rientro, è necessario scrivere le seguenti righe nel file CSS:
ul li {
margin-top: 10px;
}
Pertanto, abbiamo indicato che la distanza da ciascuna voce dell'elenco è aumentata di 10 pixel. E in questo caso è possibile e un valore negativo. Pertanto, possiamo impostare: - margin-top: -15px.