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.
Fig. 1: 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.