Si può eliminare lo spazio prima e dopo le liste?

Utente HTML.it
chiede

Si può eliminare lo spazio prima e dopo le liste?

Redazione HTML.it
risponde

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

  1. Elemento 1
  2. Elemento 2
  3. 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

  1. Elemento 1
  2. Elemento 2
  3. 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

  1. Elemento 1
  2. Elemento 2
  3. 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.