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

2014/02/02
web

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.

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.”

W3C

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.