move the vertical position of an image as a link without moving the link itself

Problem

I have two links which are using an image as a link. These images strangely are placed a bit higher than excepted, as you can see in this picture:

enter image description here

I want to move these images some pixels under so its aligned with the rest of the text. I've used margin-top and padding-top addressing with this path #foot-content a img. But when I moved them they simply move all the rest of the text downwards. Under I place my html of my footer if handy. Could you let me know what solution is there?

<footer>    
            <div id="footer-bg-left">
                <div id="foot-content">
                    <p>DiseƱado por <a href="mailto:hola@escuderodesign.com">Daniel. R-Escudero</a> <span>|</span> Todos los derechos reservados <span>|</span> <a href="mailto:info@rosasusaeta.com">info@rosasusaeta.com</a> <span>|</span><a href="http://www.linkedin.com/pub/rosa-susaeta/50/1aa/134"><img src="./_img/footer/logo.linked.png"></a> <a href="https://www.facebook.com/rosa.susaetasalichs"><img src="./_img/footer/logo.facebook.png"></a></p>
                </div>
            </div>  
</footer>
Problem courtesy of: Daniel Ramirez-Escudero

Solution

Strictly speaking I'm not sure if this is best practice, but I would just do something with relative positioning in CSS. e.g.

img {
     position: relative;
     top: 10px; /* tweak until correct */
}
Solution courtesy of: Calvin

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.