Come aumentare o diminuire lo spazio tra due elementi del layout di una pagina senza usare i CSS.

Come aumentare o diminuire la distanza tra due elementi del layout di una pagina web, di un modello, di un tema o di un widget inserendo il tag div con un opportuno margine.

Il sistema di elezione per modificare l'aspetto di un elemento del layout di una pagina è quello di usare i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox per trovare il selettore univoco dell'elemento in modo da applicargli una opportuna regola CSS per poterne modificare l'aspetto.

Se la modifica consiste soltanto nell'aumentare o nel diminuire la distanza dall'elemento precedente o da quello successivo allora si può fare anche a meno di usare questi strumenti e utilizzare un sistema più semplice e immediato. Ricordo che tutti i tag HTML hanno un tag di apertura e uno di chiusura. Ci sono però delle eccezioni come il tag <img> a cui basta inserire una slash / prima del segno finale >.  In realtà questo modo di chiudere i tag HTML viene usato anche in molti altri casi come il tag <script> che si può chiudere oltre che con </script> anche con la slash finale / esattamente come il tag <img>.

Questa regola di chiusura può essere talvolta usata anche con il tag <div> nei casi in cui si voglia modificare la distanza tra due elementi che si trovano uno sopra all'altro. Forse è il caso di fare un paio di esempi pratici. Il primo è quello del Menù di Blogger per dispositivi mobili. A seconda del modello in cui si installa il menù può essere o troppo in alto o troppo in basso. Per regolare la distanza si può inserire prima dell'HTML del menù questo semplice codice che non ha bisogno di chiusura

<div style='margin-top:25px;'/>

Si può poi operare sul valore numerico per trovare il giusto posizionamento. Questo tag può essere incollato nel modello e sarà correttamente salvato da Blogger perché la chiusura del <div> viene data dalla slash / finale. La differenza tra questa notazione e quella

<div style='margin-top:25px;'></div>

è puramente simbolica. La prima inserisce una distanza di 25 pixel tra l'elemento precedente e quello successivo mentre nel secondo caso si inserisce una distanza senza avere un contenuto.  Facciamo adesso un secondo esempio di tipo grafico per modificare la distanza tra due immagini di un post.

Contrariamente al modello di Blogger che salva il tag con la chiusura del div data dalla slash, l'Editor di Blogger non salva i post con questa notazione. Dobbiamo allora usare quest'altra riga

<div style='margin-top:30px;'></div>

per aggiungere spazio tra due elementi. Si va su HTML per poi aggiornare il post. Questo sistema si può usare anche per diminuire lo spazio tra due elementi usando dei numeri negativi. P.e.

<div style='margin-top:-10px;'></div> 

Oltre che nel modello e nei post si può usare questa procedura anche nei widget HTML/Javascript.