Lez.12 - Corso Base Css

Indentazione del Testo e la proprietà text-indent in un foglio di stile Css

Indentazione del Testo e la proprietà text-indent

La proprietà text-indent (text, testo - indent, trattino o spaziatura) definisce l'indentazione da sinistra verso destra del testo al quale si riferisce.

Se guardiamo dei testi di pubblicazioni, noteremo un rientro sinistro solo della prima riga del paragrafo, lasciando al suo posto il resto del paragrafo, per fare questo utilizziamo la proprietà text-indent.

Ora vediamo come si comporta la proprietà al variare del suo valore.

Se alla proprietà text-indent gli assegnamo il valore espresso in pixel di 0 vuol dire che gli stiamo assegnado il valore di default, (perché il valore di default è 0), e quindi non vi è nessun rientro:
p { text-indent: 0px; }

Se gli assegnamo il valore di 20px questo valore fa rientrare il capoveso di 20px.
Come si vede sotto:
p { text-indent: 20px; }

Se si vuol far rientrare l'intero paragrafo la soluzione più semplice consiste nell’assegnare un valore al solo padding sinistro per avere l’intero paragrafo indentato.
Così come segue:
p { padding-left: 20px; }
Alla proprietà text-indent si può assegnare anche un valore negativo ciò significa che il testo si sposta della valore che gli abbiamo assegnato verso sinitra del suo contenitore, e più alto è il valore negativo più si sposta verso l'esterno sinistro fino a perdere parte del testo:
p { text-indent: -100px; }

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Proprietà text-decoration</title>
  <meta charset="utf-8">
  <style type="text/css">
      #pippo1 {
	      text-indent: 0px;
      }
      #pippo2 {
	      text-indent: 20px;
      }
      #pippo3 {
	      text-indent: -100px;
      }
  </style>
 </head>
 <body>			    
   <h1>Indentazione o rientro del testo</h1>
   <p id="pippo1">Testo messo così a caso per mettere in evidenza il valore di default. Testo messo così a caso per mettere in evidenza il valore di default. Testo messo così a caso per mettere in evidenza il valore di default. Testo messo così a caso per mettere in evidenza il valore di default. Testo messo così a caso per mettere in evidenza il valore di default.</p>
   <p id="pippo2">Testo messo così a caso per mettere in evidenza il valore che fa rientrare il capoveso di 20px. Testo messo così a caso per mettere in evidenza il valore che fa rientrare il capoveso di 20px. Testo messo così a caso per mettere in evidenza il valore che fa rientrare il capoveso di 20px. Testo messo così a caso per mettere in evidenza il valore che fa rientrare il capoveso di 20px.</p>
   <p id="pippo3">Testo messo così a caso per mettere in evidenza il valore  negativo e notiamo che parte del testo lo perdiamo. Testo messo così a caso per mettere in evidenza il valore  negativo e notiamo che parte del testo lo perdiamo. Testo messo così a caso per mettere in evidenza il valore  negativo e notiamo che parte del testo lo perdiamo</p>
 </body>               
</html>