- Learn
- Guida CSS Tecniche essenziali
- Indentare il testo
Indentare il testo
Indentare il testo significa assegnare un rientro sinistro al paragrafo in cui esso è contenuto. La realizzazione più semplice consiste nell’assegnare un valore al solo padding
sinistro per avere l’intero paragrafo indentato.
Una regola come la seguente:
p { padding-left: 1.5em; }
ci consente, quindi, di avere tutto l’intero blocco di testo indentato. Possiamo anche vedere in azione l’esempio su questa pagina.
Indentare solo la prima riga del paragrafo
Nella maggior parte dei testi e delle pubblicazioni, avrete sicuramente notato un rientro sinistro solo sulla prima riga del paragrafo, lasciando inalterato il resto del blocco. Per realizzare ciò all’interno delle nostre pagine, possiamo utilizzare la proprietà text-indent
.
La proprietà è molto semplice da utilizzare, prende in ingresso un valore (in pixel, ems, etc) corrispondente al rientro desiderato. Un esempio di utilizzo è il seguente:
p { text-indent: 1.5em; }
L’esempio è disponibile su questa pagina.
Utilizzare il tag blockquote
Una pratica molto utilizzata per indentare blocchi di testo è quella di usare il tag <blockquote>
. Questo tag consente di definire uno o più paragrafi come “citazione”. È d’obbligo precisare però che, anche se può sembrare una tecnica veloce e semplice per aumentare il rientro sinistro di alcuni paragrafi, questo tag deve essere utilizzato solo per lo scopo per cui è stato realizzato, ovvero per le citazioni.
Il suo utilizzo è piuttosto semplice; può contenere al suo interno il tag <p>
e la maggior parte dei tag comuni. Un classico esempio è il seguente:
<blockquote>
<p>Lorem ipsum dolor sit amet…</p>
<p>Lorem ipsum dolor sit amet…</p>
</blockquote>
A cui è possibile assegnare uno stile come il seguente:
blockquote {
padding-left: 1.5em;
font-style: italic;
}
Se vuoi aggiornamenti su Indentare il testo inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
#Future Decoded: Giorgio Sardo
Intervista a Giorgio Sardo