I’m surprised I haven’t come across this earlier, but recently I needed to turn an image of an arrow into a clickable item by putting some padding and a border around it. That was easily done, and after I added a onclick handler I figured I was done. Then I checked it in IE5.5, and there I discovered that IE5.5 ignores the padding and puts the border around the edge of the image. It doesn’t matter if I use vspace and hspace instead, or change the display to block, IE5.5 won’t honor the padding and the only solution is to change the image to include the padding, or to wrap it in a span or div. In my case, because I needed it to be a clickable button, I decided to wrap it in an <a> tag and set the padding, border, width and display: block on the <a> tag. All was good until I tested in IE7 – IE7 will only use the width of the <a> tag as the hit area, and won’t respond to clicks within the padding. This means instead of having a clickable area anywhere instead the box, instead you have a clickable area only over the image. The solution, reluctantly, was to wrap the <a> in a <div> whose only purpose is to set the width. It seems that if you don’t explicity set the width of the <a>, then it will include the padding in the hit area.