Spazio di troppo tra due <li>

[tampertools]

C'è qualche spazio di troppo tra i li

Ho anche controllato con gli strumenti di sviluppo di chrome (che ti evidenziano margin, padding e dimensione dell'elemento) e risulta uno spazio tra i margin degli elementi

Cattura.JPG

(Lo spazio di troppo è quello tra le icone)

<ul id="social">
    <li>
        <a href="#" title="Iscriviti ai Feed">
            <img src="img/icon-feed.png" alt="Feed">
        </a>
    </li>
    <li>
        <a href="#" title="Seguici si Facebook">
            <img src="img/icon-facebook.png" alt="Facebook">
        </a>
    </li>
    <li>
        <a href="#" title="Seguici su Twitter">
            <img src="img/icon-twitter.png" alt="Twitter">
        </a>
    </li>
</ul>

#top-bar #social {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
    float: right;
}


#top-bar #social li {
    display: inline-block;
    margin: 0;
    margin-top: 17px;
}

[KillerWorm]

Ciao, generalmente questo problema è dato dal fatto che sono presenti degli spazi affianco al tag <img>. Questi, condensandosi, vanno a creare un singolo spazio.

Puoi risolvere semplicemente mettendo ogni tag <a> (e contenuti) su singole righe.

<a href="#" title="Iscriviti ai Feed"><img src="img/icon-feed.png" alt="Feed"></a>

Nel caso anche gli elementi <li>

<li><a href="#" title="Iscriviti ai Feed"><img src="img/icon-feed.png" alt="Feed"></a></li>

[tampertools]

Ho provato, non si risolve niente...

Ecco un'esempio
http://jsfiddle.net/Nicolo99/Z6Jdg/e...sult,html,css/

[KillerWorm]

Ho visto... però mettendo tutto il blocco <ul> in un unica linea si risolve... certo il codice resta poco elegante

<ul id="social"><li><a href="#" title="Iscriviti ai Feed"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Feed"></a></li><li><a href="#" title="Seguici si Facebook"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Facebook"></a></li><li><a href="#" title="Seguici su Twitter"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Twitter"></a></li></ul>

EDIT:
Un'altra soluzione può essere quella di impostare float e display block agli elementi <li>

#top-bar #social li {
    display: block;
    float: right;
    margin-top: 17px;
}

[tampertools]

beh, grazie

Ma perché il display:inline-block si comporta così?

[Prill]

copia e incolla

<p>e
e</p>

fra le due "e" non ho lasciato alcuno spazio, ma l'accapo è visto come uno spazio negli elementi in linea