Eliminare lo spazio tra gli elementi inline di un elenco o di un menu di navigazione

Hai mai osservato uno strano spazio tra gli elementi inline di un menu di navigazione o di una lista (di testo o di immagini)? Se sì, tranquillo: non si tratta di un bug del tuo browser, ma del normale comportamento di elementi inline che si allineano su una riga.

Lo spazio tra gli elementi inline di una lista
Lo spazio che si crea tra gli elementi inline di una lista

Per capirci meglio:


<ul>
    <li>uno</li>
    <li>due</li>
    <li>tre</li>
</ul>

CSS:


ul li {
    display: inline;
}

Accade infatti come con le parole nel testo: tra di loro si crea sempre almeno uno spazio. Qui, ogni elemento <li> della lista va a capo (o crea un “tab” di indentazione), imponendo al browser l’inserimento di una spaziatura. Elimina quindi quello spazio, e il problema sarà risolto.

Diverse soluzioni!

L’escamotage più elegante è comprimere il codice HTML con un tool apposito. In alternativa, puoi sfruttare uno di questi “trucchetti”:

Usa i commenti:


<ul>
    <li>uno</li><!--
 --><li>due</li><!--
 --><li>tre</li>
</ul>

Allinea “drasticamente” i tag (a scapito della lettura):


<ul>
    <li>uno</li><li>due</li><li>tre</li>
</ul>

Imposta un margine negativo nel CSS: solitamente corrisponde a -4px, ma potrebbe variare a seconda delle dimensioni del font che stai utilizzando (questa soluzione può creare qualche problema con IE6 e IE7).


ul li {
    display: inline;
    margin-right: -4px;
}

Sfrutta HTML5, che non impone l’obbligo di chiudere gli elementi <li> nelle liste:

“An <li> element’s end tag may be omitted if the <li> element is immediately followed by another <li> element or if there is no more content in the parent element.”

Cioè:


<ul>
    <li>uno
    <li>due
    <li>tre
</ul>

Al posto di display: inline; usa la proprietà float: left;. Non solo non si creerebbero quegli spazi fastidiosi tra gli elementi, ma avresti più libertà nel gestirne le dimensioni sfruttando i valori width e height.