Pubblicato il 28/09/14e aggiornato il

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

interlinea-html

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

modificare-interlinea-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

interlinea-tra-paragrafi

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

modificare-interlinea

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.




4 commenti :

  1. Ciao Ernesto ne aprofitto per chiederti due cose la prima: come si fa per impostare i contorni di tutte le foto del post? Seconda:dove posso cercare dei gadget di pulsanti social che linkano alle mie pagine ma personalizzabili come forma e colore da inserire lateralmente nel blog? Grazie mille


    RispondiElimina
    Risposte
    1. Non posso rispondere a nessuna delle due domande.La prima perché ci vorrebbe il codice è la seconda perché ci sono decine di widget e non so quali sono le tue e esigenze t
      @#

      Elimina
  2. E se volessi modificare lo spazio tra le righe di tutto il blog (non il paragrafo perché ho già provveduto con la distanza che preferivo, ma gli elementi del footer, per esempio, o i commenti)

    RispondiElimina
    Risposte
    1. Devi cercare il selettore univoco e impostare un CSS con margin-bottom. Devi cioè seguire quello che dice il post e al posto della riga di codice
      .post-body p {margin-bottom:4px;}
      per aumentare la distanza tra i paragrafi dovresti inserire un altra classe al posto di .post-body. Leggi questo post
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      Ti avverto però che non è cosa semplice
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.