Modificare la distanza tra le righe e i paragrafi di un testo.

Come modficare il valore dell'interlinea tra righe o tra paragrafi in un post di Blogger o di Wordpress con HTML e CSS.

A fronte di un commento ricevuto appena ieri ho pensato che potrebbe essere utile indicare ai blogger più attenti ai linguaggi HTML e CSS come procedere per impostare lo spazio tra le varie righe di un testo e quello tra i paragrafi. Il tag line-height che definisce appunto l'altezza della linea è quello usato per questa impostazione ma può essere usato in molti modi e per diverse esigenze. Tale distanza in tipografia è chiamata universalmente interlinea.

Impostando line-height con lo stesso valore di un contenitore possiamo per esempio centrare verticalmente il testo in un rettangolo o in un quadrato. Vediamo però tutte le possibilità che si possono manifestare o almeno quelle di cui mi sono ricordato.

MODIFICARE L'ALTEZZA DELLA LINEA NEL MODELLO

Se il vostro intendimento è quello di modificare la distanza tra le linee in tutte le pagine del blog allora dovete necessariamente operare nel modello. Dopo aver salvato il template andate su Modello > Modifica HTML e cercato il blocco di codice con .post-body usando Ctrl+F . Visualizzerete un codice che in qualche modo potrà avere una struttura simile a questo

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

Tale codice con font-size: 110%; imposta il carattere del testo il 110% di quello di default mentre line-height: 1.4; è equivalente a line-height: 1.4em; e imposta l'altezza della linea come 1,4 volte quella della dimensione del font. L'altezza della linea può anche essere impostata in pixel in questo modo line-height:20px; e sarà scollegata alla dimensione del carattere. Il collegamento alla dimensione del carattere è però necessario quando per esempio si pubblica un paragrafo con font molto grandi perché altrimenti le righe potrebbero sovrapporsi. 

MODIFICARE L'ALTEZZA DELLA RIGA IN UN POST

Le impostazioni generali del blog possono essere modificate per esempio in un determinato paragrafo quando vogliamo per questioni estetiche evidenziarlo meglio aumentare l'interlinea. Potremo per esempio usare un codice come questo

<p style="line-height:50px;">
testo del paragrafo
</p>

che produce un risultato come da screenshot successivo



Basta modificare il valore del parametro line-height per variare la distanza tra le righe.

COME IMPOSTARE LA DISTANZA TRA SINGOLI PARAGRAFI

Nel caso si voglia modificare la distanza tra un singolo paragrafo da quello successivo o da quello precedente dobbiamo semplicemente aggiungere un CSS al paragrafo in questione. Quando si apre un altro paragrafo la distanza sarà in linea generale doppia rispetto a quella tra le linee. Questa distanza ci potrà sembrare troppo grande o troppo piccola. L'inizio di un paragrafo è dato dal tag <p> e per modificare la distanza dello stesso da quello che lo precede possiamo per esempio fare queste modifiche 

Sostituire <p> con <p style="margin-bottom:-15px;"> per diminuire la distanza dal paragrafo subito sotto a quello
Sostituire <p> con <p style="margin-top:-15px;"> per diminuire la distanza dal paragrafo che sta subito sopra  a quello

Il dato numerico può naturalmente essere modificato ed essere inserito anche come positivo nel caso si voglia aumentare l'interlinea tra i due paragrafi. 

COME SETTARE LA DISTANZA TRA TUTTI I PARAGRAFI DI UN POST

Per settare la distanza della interlinea dello stesso valore tra tutti i paragrafi di un post possiamo intervenire nel singolo articolo in modalità HTML o addirittura anche nel modello. Per intervenire in un singolo post basterà aprire l'Editor e andare su HTML che si trova accanto a Scrivi. Tra il tag </p> che indica la fine di un paragrafo e il tag <p> che indica l'inizio del paragrafo successivo basterà incollare 

<p style="margin-bottom:-12px;"></p>

che porterà a questo risultato

Per modificare il modello bisogna andare su Modello > Modifica HTML, cercare la riga ]]></b:skin> e, subito sopra, incollare questa riga di codice

.post-body p {margin-bottom:-8px;}

Salvare il modello. Il risultato sarà il seguente

Ovviamente il dato numerico di -8px potrà essere modificato. Occorrerà anche che i paragrafi siano definiti con il tag <p> e non utilizzando il salto di riga <br/>. Chi voglia conoscere i fondamentali per affrontare questi argomenti può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS.