Tutti gli elementi HTML presentano un margine predefinito di alcuni pixel sul
lato superiore e su quello inferiore. Non fanno eccezione le liste, sia ordinate
(<ol>) sia non ordinate (<ul>).
Questo margine può essere eliminato tramite i CSS, ma bisogna agire sia
sulla lista sia sugli elementi che la precedono e la seguono. Procediamo con ordine.
Ecco un esempio di come appare una lista inserita tra un <h2>
e un paragrafo:
Titolo
- Elemento 1
- Elemento 2
- Elemento 3
Questo è un paragrafo.
È evidente lo spazio tra gli elementi. Ora andiamo ad impostare un margine
uguale a 0px sulla lista. Questo il codice:
<h2>Titolo</h2>
<ol style=”margin: 0px”>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<p>Questo è un paragrafo.</p>
E questo il risultato:
Titolo
- Elemento 1
- Elemento 2
- Elemento 3
Questo è un paragrafo.
Come si vede, agendo solo sulla lista non si ottengono risultati: rimangono
infatti i margini predefiniti del tag <h2>
e di <p>. Dobbiamo agire anche su quelli:
<h2 style=”margin-bottom: 2px”>Titolo</h2>
<ol style=”margin: 0px”>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<p style=”margin-top: 2px”>Questo è un paragrafo.</p>
Titolo
- Elemento 1
- Elemento 2
- Elemento 3
Questo è un paragrafo.
In questo caso il margine viene ridotto (è appena
di 2 pixel). La procedura è dunque quella di assegnare un margine di 0px
alla lista e un margine di pochissimi o 0 pixel (rispettivamente inferiore e superiore) agli elementi che la precedono e la seguono.