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


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?

            <div id="footer-bg-left">
                <div id="foot-content">
                    <p>DiseƱado por <a href="">Daniel. R-Escudero</a> <span>|</span> Todos los derechos reservados <span>|</span> <a href=""></a> <span>|</span><a href=""><img src="./_img/footer/logo.linked.png"></a> <a href=""><img src="./_img/footer/logo.facebook.png"></a></p>
Problem courtesy of: Daniel Ramirez-Escudero


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


There is currently no discussion for this recipe.

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