How to make <a> wrap around a small image with out padding?

I have the following:

<a href="#" style="border:solid 1px gray; line-height: 5px;">
    <img src="x.gif" style="border:solid 0px gray;">
</a>

L开发者_如何转开发ets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.

Try something like this:

<a href="#" style="border:solid 1px gray; display: inline-block;">
    <img src="x.gif" style="display: block;">
</a>

If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.

Try adding margin:0; padding:0; to your image.

This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.

To fix it, you could just remove any whitespace around it:

<a href="#" style="border: solid 1px gray; line-height: 5px;"><img src="x.gif" style="border: 0;" width="5" height="5"></a>

Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.

This worked for me across the latest browsers I tested on including IE9

<a href="#" style="font-size:0;text-decoration:none;">
    <img src="x.png" style="border:1px red solid;">
</a>

However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).

<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
    <img src="x.png" style="border:none">
</a>

Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.