Image et CSS

Bonjour,

Je ne suis pas très content du code CSS que j'ai développé.
Voici le code HTML :

<footer>        
        <h2>Ils vous accueillent…</h2>
        <div id="separation"></div>
        <section>
            <ul>
                <li><a href="http://latriadedubienetre.fr"
                title="Le site de Philippe Idlas, Kinésiologue®">
                    <img src="image/latriadedubienetre.jpg"
                    alt="Image du site de Philippe Idlas, 
                    latriadedubienetre.fr, kinésiologue" />
                </a></li>
                <li><a href="http://www.dynamic-reflex.fr"
            title="Le site de Laetitia Jouaux">
                    <img src="image/dynamicreflex.jpg"
                    alt="Image du site de Laetitia Jouaux, 
                    dynamic-reflex.fr" />
                </a></li>
                <li><a href="http://www.sourcesdebienetre.com"
            title="Le site de Sonia Le Follic">
                    <img src="image/sourcesbienetre.jpg"
                    alt="Image du site de Sonia Le Follic, 
                    sourcesdebienetre.com" />
                </a></li>
            </ul>
        </section>
    </footer>

Ce que je veux c'est pouvoir afficher ces 3 images les unes en dessous des autres en ayant un margin pour les séparer.

Voici ce que j'ai dans ma feuille de style. C'est lourd et je n'arrive pas à avoir de margin.

/* ------------ */
/* Footer */
/* ------------ */
footer {
    clear: both;
}
footer section {
    padding:20px;
    background:#52c3f1;
}
footer section ul {
    height:220px;
    background: url(../image/trans.png) #52c3f1 left top;
    list-style-type:none;
}
footer section li {
    display:block;
    width:411px;
    margin:5px;
    padding:5px;
}
footer section li a {
    display:block;
    margin-bottom: 10px;
}
footer section li a img {
    -moz-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg);
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    transition: all .1s;
}
footer section li a img:hover {
    -moz-transform: rotate(5deg); 
    -webkit-transform: rotate(5deg);
}

Si quelqu'un pouvez me mettre sur la bonne piste. J'ai vraiment du mal avec la balise <img>. J'arrive rarement à faire ce que je veux de façon simple. Pourtant j'ai beaucoup lu sur le sujet.

Merci pour votre aide.

;)