Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

paragrafi rientrati

Ecco qui qualcosa di semplice: far rientrare la prima riga di ogni paragrafo. Molte persone lo trovano più semplice da leggere rispetto a lasciare una riga vuota tra i paragrafi, specialmente nei testi lunghi, ed inoltre permette di riservare la riga vuota per interruzioni più importanti.

Il trucco qui è di far rientrare solo i paragrafi che seguono altri paragrafi. Il primo paragrafo di una pagina non ha bisogno di rientranze e nemmeno quei paragrafi che seguono un diagramma, un titolo o qualcos'altro che non sia del testo. Le regole sono di fatto molto semplici:

p {
 margin-bottom: 0 }
p + p {
 text-indent: 1.5em;
 margin-top: 0 }

Questo fa rientrare la prima riga solo di quei paragrafi che seguono un altro paragrafo. Inoltre elimina lo spazio sotto tutti i paragrafi e sopra tutti i paragrafi con rientranza. Tuttavia, all'atto pratico si troverà che c'è bisogno di qualche eccezione.

In questa pagina, per esempio, ci sono elementi P che sono usati come didascalie per le immagini(vedere l'esempio “Figure & didascalie”). Li abbiamo centrati e così non si dovrebbero far rientrare. Una semplice regola 'p.caption {text-indent: 0}' si prende cura di ciò. Si può vedere che abbiamo davvero usato questa regola nell'esempio.

Possiamo adesso usare diverse quantità di spazio bianco tra i paragrafi per indicare l'importanza dell'interruzione nel testo. Definiamo tre diverse classi: stb (small thematic break), mtb (medium thematic break) e ltb (large thematic break). Abbiamo dato a questo paragrafo la classe stb, si può quindi vedere l'effetto.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }