Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 15 di 49
  • livello principiante
Indice lezioni

Indentare il testo

Definire un rientro per un'intera porzione di testo o per la sola prima riga
Definire un rientro per un'intera porzione di testo o per la sola prima riga
Link copiato negli appunti

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;
}

Ti consigliamo anche