CSS text-indent
La proprietà CSS text-indent imposta il rientro della prima riga di testo
La proprietà text-indent consente di creare un rientro nella prima riga di un paragrafo. È utile per migliorare la leggibilità di blocchi di testo, specialmente in articoli o contenuti editoriali.
Sintassi
Significato dei valori principali:
lunghezza: Indica il rientro in unità come
px,em,rem, ecc. (es:text-indent: 40px;).percentuale: Rientra in base alla larghezza del contenitore (es:
text-indent: 10%;).inherit: Eredita il valore dal suo elemento genitore.
initial: Imposta il valore di default (
0).unset: Rimuove qualsiasi valore impostato e ripristina secondo contesto (inherit o initial).
Esempio proprietà: text-indent
Codice Esempio: text-indent
.text-indent-example {
text-indent: 40px;
font-size: 18px;
line-height: 1.6;
width: 80%;
margin: auto;
max-width: 600px;
text-align: justify;
}
Contenuto Esempio: text-indent
Esempio di utilizzo di text-indent
In questo esempio, la proprietà text-indent viene utilizzata per creare un rientro nella prima riga di un paragrafo:
Questo è un paragrafo di esempio in cui la prima riga è rientrata grazie alla proprietà text-indent. Questa tecnica è spesso utilizzata nella composizione tipografica per migliorare la leggibilità dei testi lunghi e per distinguere visivamente l'inizio di un nuovo paragrafo.
CSS e HTML per text-indent:
<style>
.text-indent-example {
text-indent: 40px;
font-size: 18px;
line-height: 1.6;
width: 80%;
max-width: 600px;
}
</style>
<p class="text-indent-example">
Questo è un paragrafo di esempio in cui la prima riga è rientrata...
</p>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
