Mais de uma classe dentro dos elementos

Fiz assim no meu html

<aside>
            ...
            <nav>
            ...
            </nav>
            <ul class="icones-sociais">
                <li><a href="http//: github.com.br/joaodasilva"><img src="github.png" alt="github"></a></li>
                <li><a href="http/:twitter.com.br/joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
                <li><a href="http//: linkedin.com.br/joaodasilva"><img src="linkedin.png"></a></li>
            </ul>

        </aside>
        <footer>
            © João da Silva 2014
              <ul class="social-rodape">
                <li><a href="http//: github.com.br/joaodasilva"><img src="github.png" alt="github"></a></li>
                <li><a href="http/:twitter.com.br/joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
                <li><a href="http//: linkedin.com.br/joaodasilva"><img src="linkedin.png"></a></li>
            </ul>

e assim no css

.icones-sociais li {
    display: inline-block;
}

.social-rodape li {
    display: inline-block;
    margin:60px;
}

e percebi que o resultado é diferente do proposto pelo Luis. Ficou com margin ao redor de 60 em cada icone. Por quê o resultado é diferente?